如何将混合模式添加到图像？

Question

我想在悬停时在图像上添加一个多重混合模式的效果。现在当我悬停的时候，它只是一个顶部有不透明的纯色图层。我尝试了背景混合模式，但不起作用。下面是我的代码：

​

.imgwrapper {
  position: relative;
}

.showtext:hover + div {
  display: block;
}
	
.showtext:hover {
	-webkit-filter:blur(2px);
	filter: blur(2px);
}	
	
.imagess:hover > .overlay {
	 left: 0px;
  top: 0px;
	right:0;
	bottom:0;
    width:250px;
    height:250px;
    position:absolute;
    background-color:#b41f24;
    opacity:0.85;
    border-radius:0px;
}
.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;
}

<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">
							<img   class="showtext" src="images/thumb_item09.png" />
							 <div class="overlay">
							<div id="view">view</div></div></div></div>
							
							</div>
						</div><!-- // .item -->
					<!-- // .desktop-3 -->
				</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>

​