如何將混合模式添加到圖像？

Question

我想在懸停時在圖像上添加多重混合模式效果。現在，當我懸停時，它只是一個頂部不透明的純色層。我嘗試了背景混合模式，但沒有奏效。這裏是我的代碼：

.imgwrapper { 
 
    position: relative; 
 
} 
 

 
.showtext:hover + div { 
 
    display: block; 
 
} 
 
\t 
 
.showtext:hover { 
 
\t -webkit-filter:blur(2px); 
 
\t filter: blur(2px); 
 
} \t 
 
\t 
 
.imagess:hover > .overlay { 
 
\t left: 0px; 
 
    top: 0px; 
 
\t right:0; 
 
\t bottom:0; 
 
    width:250px; 
 
    height:250px; 
 
    position:absolute; 
 
    background-color:#b41f24; 
 
    opacity:0.85; 
 
    border-radius:0px; 
 
} 
 
.overlay #view { 
 
\t position: absolute; 
 
    left: 108px; 
 
    top: 108px; 
 
color: white; 
 
text-decoration:underline; 
 
    display: block; 
 
    pointer-events: none; 
 
    
 
    font-size: 18px; 
 
    width: 250px; 
 
    letter-spacing: 4px; 
 
}

<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>Pawsome</h3> 
 
\t \t \t \t \t \t \t <span class="category">ux/ui, web</span> 
 

 
\t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t <div class="imgwrapper"> 
 
\t \t \t \t \t <div class="imagess"> 
 
\t \t \t \t \t \t \t <img class="showtext" src="images/thumb_item09.png" /> 
 
\t \t \t \t \t \t \t <div class="overlay"> 
 
\t \t \t \t \t \t \t <div id="view">view</div></div></div></div> 
 
\t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div><!-- // .item --> 
 
\t \t \t \t \t <!-- // .desktop-3 --> 
 
\t \t \t \t </a>

謝謝

Answer 1

這會幫助你。

您需要將圖片作爲background-image添加blending-mode。

.imgwrapper { 
 
    position: relative; 
 
} 
 
.showtext { 
 
    width: 250px; 
 
    height: 250px; 
 
    background-image: url(https://unsplash.it/200/300/?random); 
 
    background-size: cover; 
 
    background-color: #b41f24; 
 
    transition: all 0.1s ease; 
 
} 
 
.showtext:hover + div { 
 
    display: block; 
 
} 
 
.showtext:hover { 
 
    -webkit-filter: blur(2px); 
 
    filter: blur(2px); 
 
    background-blend-mode: multiply; 
 
} 
 
.overlay #view { 
 
    position: absolute; 
 
    left: 108px; 
 
    top: 108px; 
 
    color: white; 
 
    text-decoration: underline; 
 
    display: block; 
 
    pointer-events: none; 
 
    font-size: 18px; 
 
    width: 250px; 
 
    letter-spacing: 4px; 
 
    z-index: 100; 
 
}

<a href="single-illustration-sidebar-left.html" class="permalink"> 
 
    <div class="desktop-3 mobile-half columns"> 
 
    <div class="item"> 
 
     <h3>Pawsome</h3> 
 
     <span class="category">ux/ui, web</span> 
 

 

 
     <div class="imgwrapper"> 
 
     <div class="imagess"> 
 
      <div class="showtext"></div> 
 
      <div class="overlay"> 
 
      <div id="view">view</div> 
 
      </div> 
 
     </div> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 
    <!-- // .item --> 
 
    <!-- // .desktop-3 --> 
 
</a>