|
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实现鼠标移至图片上显示遮罩层效果,希望对大家有所帮助
|
|