最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
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; }
效果图:
相关文章
- CSS 鼠标点击拖拽效果代码展示 10-31
- CSS使用SVG实现动态分布的圆环发散路径动画教程 10-31
- CSS组合选择器解析 10-26
- css带搜索导航栏的代码展示 10-26
- css复合选择器的具体使用方法介绍 10-26
- css三列自适应布局教程 10-26