如何在懸停時在圖像上添加多重混合模式的圖層？

Question

我希望懸停時像這樣：從第一張圖片到第二張圖片。效果是：灰度和模糊原始圖像+ 頂部的乘法層。

現在我使用的變化到另一個圖像伎倆要做到這一點，但它的不方便。這裏是我到目前爲止的代碼：

.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; 
 
}

<a href="single-illustration-sidebar-left.html" class="permalink"> 
 
\t \t \t \t \t <div class="desktop-3 mobile-half columns"> 
 
\t \t \t \t \t \t <div class="item"> 
 
\t \t \t \t \t \t \t <h3>Plython album</h3> 
 
\t \t \t \t \t \t \t <span class="category">identity</span> 
 

 
\t \t \t \t \t \t \t <div class="imgwrapper"> 
 
\t \t \t \t \t \t \t <img class="showtext" src="images/thumb_item08.png" onmouseover="this.src='images/thumb_item08a.png';" onmouseout="this.src='images/thumb_item08.png';" /> 
 
\t \t \t \t \t \t \t <div id="view">view</div></div> 
 
\t \t \t \t \t \t </div><!-- // .item --> 
 
\t \t \t \t \t </div><!-- // .desktop-3 --> 
 
\t \t \t \t </a>

謝謝！

Answer 1

我希望你覺得這段代碼有用。

Working Fiddle

你需要添加一個容器你的形象，並引發懸停就可以了。

.img-con { 
 
    width: 250px; 
 
    padding: 5%; 
 
    background: rgba(209, 19, 15, 0); 
 
    transition: ease .1s; 
 
    -webkit-transition: ease .1s; 
 
    -moz-transition: ease .1s; 
 
    -ms-transition: ease .1s; 
 
    -o-transition: ease .1s; 
 
} 
 
.img-con > img { 
 
    position: relative; 
 
    width: 100%; 
 
    transition: ease .1s; 
 
    -webkit-transition: ease .1s; 
 
    -moz-transition: ease .1s; 
 
    -ms-transition: ease .1s; 
 
    -o-transition: ease .1s; 
 
} 
 
.img-con:hover { 
 
    background: rgba(209, 19, 15, 0.75); 
 
} 
 
.img-con:hover > img { 
 
    z-index: -1; 
 
    -webkit-filter: grayscale(100%) blur(2px) contrast(200%); 
 
    filter: grayscale(100%) blur(2px) contrast(200%); 
 
}

<div class="img-con"> 
 
    <img src="http://i.stack.imgur.com/zzzFU.png" /> 
 
</div>