纯CSS实现鼠标移到图片上显示遮罩层效果

欧阳锋

1、将遮罩层html代码与图片放在一个div里面，这里我是放在 .img_div里面做个案例：

1. <div class="img_div">
   
2.     <img src="./images/paella-dish.jpg">
   
3. 
   
4.         <a href="#">
   
5.             <div class="mask">
   
6.                <h3>A Picture of food</h3>
   
7.                 </div>
   
8.         </a>
   
9. </div>

复制代码

2.为图片及遮罩层添加样式，

图片：relative

遮罩层：absolute

使两者样式重合。

鼠标不在图片上时，遮罩层不显示 .mask { opacity: 0; }

1. .img_div {
   
2.     margin: 20px 400px 0 400px;
   
3.     position: relative;
   
4.     width: 531px;
   
5.     height: 354px;
   
6. }
   
7. .mask {
   
8.     position: absolute;
   
9.     top: 0;
   
10.     left: 0;
    
11.     width: 531px;
    
12.     height: 354px;
    
13.     background: rgba(101, 101, 101, 0.6);
    
14.     color: #ffffff;
    
15.     opacity: 0;
    
16. }
    
17. .mask h3 {
    
18.     text-align: center;
    
19. }

复制代码

3.使用hover改变透明度，使遮罩层显示。

1. .img_div a:hover .mask {
   
2.     opacity: 1;           
   
3. }

复制代码

效果图来看一下：

4.以上所述是小编给大家介绍的CSS实现鼠标移至图片上显示遮罩层效果，希望对大家有所帮助