悬停时的颜色透明度叠加效果

Question

悬停时的颜色透明度叠加效果

csscolorshoveroverlay

4

我正在制作个人网站，希望在图片上悬停时能够出现半透明的深红色叠加层。目前我只能找到使用Webkit修改照片的亮度、饱和度或色调。

需要说明的是，这些特性只能在我指定标签（如"img"）时有效，而且不能与"class"或"id"一起使用。

希望能得到任何帮助。

以下是我的代码：

html

<div>
<img src="images/amadea/book.jpg" alt="Amadea Bailey- Abstract Expressionist">
</div>

css

img{
    display: block;
}

img:hover{
    -webkit-filter:  grayscale(100%) brightness(51%);
}

- ncuda

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Josh Crozier · Accepted Answer

您可以使用一个绝对定位相对于父级元素的 :after 伪元素。该伪元素将与父级相同大小，因此适用于所有 img 尺寸。它基本上只是在 :hover 上添加了一个透明叠加层，实现了您要寻找的“滤镜”。您可以使用任何背景颜色，自定义透明度甚至添加内容。

示例请参见：这里。

div {
    position:relative;
    display:inline-block;
}
div:hover:after {
    content:"\A";
    width:100%;
    height:100%;
    background:rgba(255, 0, 0, 0.5);
    position:absolute;
    top:0;
    left:0;
}