Как добавить слой с режимом многократного смешивания на изображении при наведении курсора?

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>