源码论坛,商业源码下载,尽在锦尚中国商业源码论坛

标题: css-实现鼠标移至图片上显示遮罩层 [打印本页]

---

作者: 洪七公    时间: 2022-12-7 14:03
标题: 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. }

复制代码

效果图：

(, 下载次数: 71)

上传

点击文件名下载附件

---

欢迎光临 源码论坛,商业源码下载,尽在锦尚中国商业源码论坛 (https://bbs.52jscn.com/)

Powered by Discuz! X3.3