css-实现鼠标移至图片上显示遮罩层

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

1、将遮罩层html代码与图片放在一个div
我是放在 .img_div里。

<div class="img_div"><img src="./images/paella-dish.jpg"><a href="#"><div class="mask"><h3>A Picture of food</h3></div></a>
</div>

2、为图片及遮罩层添加样式
图片：relative
遮罩层：absolute
使两者样式重合。
鼠标不在图片上时，遮罩层不显示 .mask { opacity: 0; } 。

.img_div {margin: 20px 400px 0 400px;position: relative;width: 531px;height: 354px;
}
.mask {position: absolute;top: 0;left: 0;width: 531px;height: 354px;background: rgba(101, 101, 101, 0.6);color: #ffffff;opacity: 0;
}
.mask h3 {text-align: center;
}

3、使用hover
改变透明度，使遮罩层显示。

.img_div a:hover .mask {opacity: 1;           
}

效果图：

 

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

---