CSS实现鼠标移至图片上显示遮罩层效果
发布时间:2019-11-20 14:16:55 作者:佚名 我要评论
这篇文章主要介绍了CSS实现鼠标移至图片上显示遮罩层效果,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下吧
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
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 content的attr实现鼠标悬浮提示(tooltip)效果
这篇文章主要介绍了使用CSS content的attr实现鼠标悬浮提示(tooltip)效果,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-10-10- 本文通过实例代码给大家介绍了CSS实现鼠标悬浮无限向下级展示的实例代码,需要的朋友参考下吧2017-09-07
- 昨天写样式遇到个问题,如何让鼠标悬浮DIV后,显示DIV外的按钮,可以点击到按钮。下面通过本文给大家分享CSS鼠标悬浮DIV后显示DIV外的按钮解决方法,感兴趣的朋友一起看看2017-08-26
- 使用了CSS3的animation、transform、transition制作了一个动画导航效果,其中利用了Ligature Icon UI制作了导航中的ICON图标,需要了解的朋友可以参考下2012-12-27
- 这篇文章主要介绍了css实现缕空遮罩层的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习2020-06-03
- 这篇文章主要介绍了css3遮罩层镂空效果的多种实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学2020-05-11
- 这篇文章主要介绍了CSS实现带遮罩层可关闭的弹窗效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-03-09
- 这篇文章主要介绍了CSS 鼠标悬浮在图片上添加遮罩层效果的实现,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-12-17
最新评论