Comment ajouter du mode de fusion à l'image?

Question

Je souhaite ajouter un effet de mode de fusion multiple sur l'image lors du survol. En ce moment, quand je plane, c'est juste une couche de couleur solide avec une opacité sur le dessus. J'ai essayé le mode background-blend mais je n'ai pas travaillé. Voici mon code:

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

Merci

Answer 1

Cela devrait vous aider. Vous devez avoir l'image en tant que background-image pour ajouter 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>