如何在悬停时在图像上添加具有多重混合模式的图层？

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">
					<div class="desktop-3 mobile-half columns">
						<div class="item">
							<h3>Plython album</h3>
							<span class="category">identity</span>

							<div class="imgwrapper">
							<img  class="showtext" src="images/thumb_item08.png" onmouseover="this.src='images/thumb_item08a.png';" onmouseout="this.src='images/thumb_item08.png';" />
							<div id="view">view</div></div>
						</div><!-- // .item -->
					</div><!-- // .desktop-3 -->
				</a>

谢谢！

Answer 1

我希望您觉得此代码有用。

Working Fiddle

您需要在图片中添加容器并触发悬停在其上。

＆＃13;

＆＃13;

.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%);
}

＆＃13;

<div class="img-con">
  <img src="http://i.stack.imgur.com/zzzFU.png" />
</div>

＆＃13;

＆＃13;

＆＃13;