|
|
应用场景：鼠标移动到某个图片上会显示播放按钮，显示一个遮罩层提示文字等等，有时候通过js脚本实现，但是更为简单的办法可以使用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;
- }
效果图：
|
|
发表于 2023-5-18 10:45:32
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
收藏
分享