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; }
效果图: