悬停时如何在图像上添加具有多重混合模式的图层?
Posted
技术标签:
【中文标题】悬停时如何在图像上添加具有多重混合模式的图层?【英文标题】:How to add a layer with multiply blend mode on image when hover? 【发布时间】:2016-10-03 01:21:28 【问题描述】:悬停时我想要这样的东西:从第一张图片到第二张图片。效果是:灰度和模糊原始图像+顶部的多层。
现在我正在使用更改为另一个图像的技巧来执行此操作,但这很不方便。到目前为止,这是我的代码:
.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>
谢谢!
【问题讨论】:
【参考方案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>
【讨论】:
抱歉回复晚了,是的,它工作得很好!谢谢你 我刚刚意识到红色层不是乘法。当我使用背景图像和背景混合模式时:乘法;它变成了乘法,但是在您的代码中,图像链接在 HTML 中,所以我不知道如何使它乘法,有没有办法?谢谢 我通过使用 mix-blend-mode 弄明白了,它现在可以按我的意愿工作了。以上是关于悬停时如何在图像上添加具有多重混合模式的图层?的主要内容,如果未能解决你的问题,请参考以下文章