title: How to add a layer with multiply blend mode on image when hover?
body: <p>I want something like this when hover: from the first image to the second image. The effects are: <strong>greyscale</strong> and <strong>blur</strong> original image + <strong>a multiply layer on top.</strong> </p>
  
  <p><a href="https://i.stack.imgur.com/zzzFU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zzzFU.png" alt="From this"></a></p>
  
  <p><a href="https://i.stack.imgur.com/ofXbE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ofXbE.png" alt="to this"></a></p>
  
  <p>Right now I'm using the change to another image trick to do this but it's inconvenient. Here's  my code so far:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.imgwrapper {
    position: relative;
  }
  .showtext + div {
    position: absolute;
    left: 113px;
    top: 113px;
  color: white; 
   text-decoration:underline;
    display: none;
    pointer-events: none;
    font-size: 18px;
    width: 250px;
    letter-spacing: 4px;
  }
  .showtext:hover + div {
    display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a href="single-illustration-sidebar-left.html" class="permalink"&gt;
       &lt;div class="desktop-3 mobile-half columns"&gt;
        &lt;div class="item"&gt;
         &lt;h3&gt;Plython album&lt;/h3&gt;
         &lt;span class="category"&gt;identity&lt;/span&gt;
  
         &lt;div class="imgwrapper"&gt;
         &lt;img  class="showtext" src="images/thumb_item08.png" onmouseover="this.src='images/thumb_item08a.png';" onmouseout="this.src='images/thumb_item08.png';" /&gt;
         &lt;div id="view"&gt;view&lt;/div&gt;&lt;/div&gt;
        &lt;/div&gt;&lt;!-- // .item --&gt;
       &lt;/div&gt;&lt;!-- // .desktop-3 --&gt;
      &lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thank you!</p>