호버링 할 때 이미지에 다중 블렌드 모드를 사용하여 레이어를 추가하는 방법은 무엇입니까?

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>

죄송