一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

CSS如何实现鼠标移至图片上显示遮罩层效果 CSS实现鼠标移至图片上显示遮罩层效果实例

时间:2019-11-26 编辑:袖梨 来源:一聚教程网

本篇文章小编给大家分享一下CSS实现鼠标移至图片上显示遮罩层效果实例,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。

1、将遮罩层html代码与图片放在一个div

我是放在 .img_div里。

css;">

2、为图片及遮罩层添加样式

图片:relative

遮罩层:absolute

使两者样式重合。

鼠标不在图片上时,遮罩层不显示 .mask { opacity: 0; } 。

.img_div {
    margin: 20px 400px 0 400px;
    position: relative;
    
    
}
.mask {
    position: absolute;
    top: 0;
    left: 0;
    
    
    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;           
}

效果图:

热门栏目