本文介绍了如何使用纯CSS实现鼠标悬浮在图片上时显示遮掩层并展示文字。通过相对定位和绝对定位，以及:hover伪类，可以轻松创建这一效果。示例代码展示了具体的实现方式。
今天和同学交流关于鼠标悬浮在图片上时显示的遮掩层，其实完全可以利用CSS中的伪类:hover来实现，说到这里很多有一定基础经验的人肯定已经想到了。
考虑到还有小白同学，我也花了几分钟写了一段代码，其实非常简单，先上图片看一下效果吧
下面来讲一讲具体思路。
首先我们在body中写一个
这个块用来包含2部分内容，一部分是Img，即图片，另一部分则是遮掩层，用一个块div来表示。此时我们得到如下代码
内容
样式就各位同学自己去加了，但是要注意一点，一般情况下。
最外面的块的宽高=img宽高=里面的块的宽高
此时出现了一个尴尬的情况，块内的内容的高度是块高度的2倍。
如下图(为了比较，没有让右边内容重合在左边)
最里面的块在黑线以下，即超出了最外面块的高度设置
也有很多解决办法，但是博主选择的
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
