css遮罩层实现

效果图：


实现原理非常简单，就是利用绝对定位，绝对定位完全覆盖图片，并且设置z-index，然后透明度设置为0，当鼠标移动到图片上的时候，让浮空层透明度大于0即可

主要代码如下：
‘’’

Ethan Dutton

SENIOR VISUAL DESIGNER

‘’’
css代码：
‘’’

.image-cell{
position: relative;
width: min-content;
}
.mask-cell{
position: absolute;
top:0;
width: 100%;
height: 100%;
opacity: 0;
background-color: #000;
transition-duration: .4s;
}
.mask-icons{
width: 50%;
margin: auto;
}
.mask-icon{
width: 50px;
height: 50px;
border:1px solid white;
border-radius: 50%;
}
.image-cell:hover .mask-cell{
opacity: 0.65;
cursor: pointer;
}
‘’’
github地址：https://github.com/1810551251/cssdemos/tree/main/mask-layer