css3 鼠标经过遮罩层

CSS3是网页设计中常用的技术，其中鼠标经过遮罩层效果十分常见。具体实现方法如下：

/* HTML代码 */div class="mask">
    img src="xxx.jpg" alt="图片">
    div class="shade">
    /div>
    /div>
/* CSS代码 */.mask {
    position: relative;
}
.mask img {
    display: block;
}
.mask .shade {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    transition: opacity .3s ease-in-out;
}
.mask:hover .shade {
    opacity: 1;
}
    

其中，HTML代码中使用了div> 标签包裹图片，同时添加了一个名为“shade”的遮罩层。

CSS代码中，设置了遮罩层的基本样式，将其设为全黑，半透明，并且在鼠标经过时，将透明度设为1，以达到慢慢显示的效果。

有了这个效果，我们可以在图片上添加文字或者其他元素，当鼠标经过时，会自然而然地显示出来，加强用户体验。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！