纯CSS实现项目展示遮罩详情效果

本实例主要用于项目展示时鼠标hover后显示一个遮罩显示项目详情的效果，遮罩采用CSS的绝对定位以及CSS3盒子模型。

本实例应用广泛，很多品牌官方网站均有采用。

hover：

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title>纯CSS实现项目展示遮罩详情效果</title>
 7         <link rel="shortcut icon" href="http://www.cdtu6129.cn/img/favicon.ico" type="image/x-icon">
 8         <style type="text/css">
 9             * {
10                 margin: 0;
11                 padding: 0;
12             }
13             /*外壳*/
14             .wrap {
15                 width: 200px;
16                 height: 200px;
17                 margin: 200px auto;
18                 /*为遮罩层设置父元素定位*/
19                 position: relative;
20                 overflow: hidden;
21             }
22             /*项目*/
23             .iteam {
24                 width: 200px;
25                 height: 200px;
26                 overflow: hidden;
27                 float: left;
28             }
29             /*项目图片*/
30             .iteam img{
31                 width: 200px;
32                 height: 200px;
33             }
34             /*项目图片被hover后遮罩的display属性设置为block*/
35             .iteam:hover+.shade {
36                 display: block;
37             }
38             /*遮罩*/
39             .shade {
40                 width: 200px;
41                 height: 200px;
42                 padding: 10px;
43                 color: #FFFFFF;
44                 background: #000;
45                 opacity: 0.6;
46                 /*相对父元素外壳定位*/
47                 position: absolute;
48                 left: 0px;
49                 top: 0px;
50                 /*解决hover后图片闪动问题*/
51                 pointer-events: none;
52                 /*防止设置padding后影响盒子大小*/
53                 box-sizing: border-box;
54                 float: left;
55                 display: none;
56                 /*遮罩置于顶层*/
57                 z-index: 999;
58             }
59             
60             .shade h3 {
61                 text-align: center;
62                 line-height: 50px;
63             }
64         </style>
65     </head>
66 
67     <body>
68         <!--外壳-->
69         <div class="wrap">
70             <!--项目-->
71             <div class="iteam">
72                 <img src="http://cnblogs.cdtu6129.cn/img/TT.JPG" />
73             </div>
74             <!--遮罩-->
75             <div class="shade">
76                 <h3>Tizzy T</h3>
77                 <p>本名谢锐韬，中国内地嘻哈说唱男歌手。2010年获得华南地区Beat Box冠军。2016年推出首张个人专辑《你的男孩》。</p>
78             </div>
79         </div>
80         
81     </body>
82 
83 </html>

点击链接查看实例

如有不足，欢迎指出。