CSS实现鼠标移至图片上显示遮罩层及文字效果

本文主要是介绍CSS实现鼠标移至图片上显示遮罩层及文字效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

效果图：

1、将遮罩层html代码与图片放在一个div

我是放在 .proBK里。

  <div class="proBK"><img src="../../assets/image/taskPro.png" class="proImg"><div class="imgText"><h5>用户在线发布任务</h5></div></div>

2、为图片及遮罩层添加样式

图片：relative

遮罩层：absolute

使两者样式重合。

鼠标不在图片上时，遮罩层不显示 .imgText{ opacity: 0; } 。

.proBK {width: 380px;height: 260px;margin-bottom: 20px;position: relative;
}.proImg {width: 100%;height: 100%;}.imgText{position: absolute;background: rgba(106, 64, 155, 0.8);top: 0px;left: 0px;width: 100%;height: 100%;cursor: pointer;opacity: 0;color: #ffffff;text-align: center;
}h5 {padding-top: 103px;font-size: 18px;
}.proBK .imgText:hover {opacity: 1;}

3、使用hover

改变透明度，使遮罩层显示。

 .proBK .imgText:hover {opacity: 1;}

这篇关于CSS实现鼠标移至图片上显示遮罩层及文字效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---