纯css实现鼠标移至图片上显示遮罩层的代码示例

洪七公

应用场景：鼠标移动到某个图片上会显示播放按钮，显示一个遮罩层提示文字等等，有时候通过js脚本实现，但是更为简单的办法可以使用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. }

复制代码

效果图：