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

上一篇: CSS3实现酷炫的3D旋转透视效果下一篇:CSS动态渐变色边框围绕内容区域旋...

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

发布时间：2022-04-13 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了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

遮罩层：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实现鼠标移至图片上显示遮罩层效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本宝典网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

脚本宝典总结

以上是脚本宝典为你收集整理的CSS实现鼠标移至图片上显示遮罩层效果全部内容，希望文章能够帮你解决CSS实现鼠标移至图片上显示遮罩层效果所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：

上一篇: CSS3实现酷炫的3D旋转透视效果下一篇:CSS动态渐变色边框围绕内容区域旋...

猜你在找的CSS相关文章