title: Color overlay over image on hover
body: <p>I have this example:</p>
  
  <p><a href="https://jsfiddle.net/3q81h1es/" rel="nofollow noreferrer">https://jsfiddle.net/3q81h1es/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.image1 {
    display: inline-block;
    height: 300px;
    width: 300px;
    background: url("http://www.avocat.dac-proiect.ro/wp/wp-content/themes/twentyfourteen/images/images1440/b1.jpg");
    margin-left: auto;
    vertical-align: top;
  }
  .image1:hover {
    opacity: 0.3;
    filter: alpha(opacity=30);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="image1"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want to make a blue haze effect, like in the picture below:</p>
  
  <p><img src="https://i.stack.imgur.com/ca0YV.png" alt="enter image description here"></p>
  
  <p>Can you help me to solve this problem?</p>
  
  <p>I tried to add <code>.wrap{background:blue;}</code> but not working unfortunately.</p>