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
css鼠标点击样式
遮罩层：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实现⿏标移⾄图⽚上显⽰遮罩层效果，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！
如果你觉得本⽂对你有帮助，欢迎转载，烦请注明出处，谢谢！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。