|
|
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;
- }
效果图来看一下：
4.以上所述是小编给大家介绍的CSS实现鼠标移至图片上显示遮罩层效果，希望对大家有所帮助
|
|
发表于 2021-7-2 15:37:04
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
收藏
分享