在css中鼠标放在图片上带遮罩层,CSS 鼠标悬浮在图片上添加遮罩层效果的实现...

先看效果：

鼠标移在图片上时，添加阴影效果+文字 / 图标

实现的关键是 CSS 的 opacity 和 hover，本文也主要介绍遮罩层的实现

HTML:

CSS:【删除了一些和上图实现无关的代码】

我觉得重点代码是

父级元素 img_div 要display: block;position: relative;

子级元素 mask 遮罩层 position: absolute;opacity: 0;pointer-events:none;

鼠标悬浮时 opacity: 1;

其他大家都可根据业务需要进行改进

需要指出的是 pointer-events:none 目的是解决有遮罩层绝对定位时，点击图片无法触发事件，比如代码中的 deleteImg 事件

.img_div {

border-radius: 10px;

display: block;

position: relative;

}

.imgCSS {

height: 100%;

width: 100%;

border-radius: 10px;

display: block;

cursor: pointer;

}

.mask {

position: absolute;

background: rgba(101, 101, 101, 0.6);

color: #ffffff;

opacity: 0;

top: 0;

right: 0;

width: 100%;

height: 100%;

border-radius: 10px;

pointer-events:none;

}

.mask h3 {

text-align: center;

margin-top: 25%;

}

.img_div:hover .mask {

opacity: 1;

}