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. }

复制代码

效果图：