本实例主要用于项目展示时鼠标hover后显示一个遮罩显示项目详情的效果，遮罩采用CSS的绝对定位以及CSS3盒子模型。
本实例应用广泛，很多品牌官方网站均有采用。
hover：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>纯CSS实现项目展示遮罩详情效果</title>
<link rel="shortcut icon" href="http://www.cdtu6129.cn/img/favicon.ico" type="image/x-icon">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
/*外壳*/
.wrap {
width: 200px;
height: 200px;
margin: 200px auto;
/*为遮罩层设置父元素定位*/
position: relative;
overflow: hidden;
}
/*项目*/
.iteam {
width: 200px;
height: 200px;
overflow: hidden;
float: left;
}
/*项目图片*/
.iteam img{
width: 200px;
height: 200px;
}
/*项目图片被hover后遮罩的display属性设置为block*/
.iteam:hover+.shade {
display: block;
}
/*遮罩*/
.shade {
width: 200px;
height: 200px;
padding: 10px;
color: #FFFFFF;
background: #000;
opacity: 0.6;
/*相对父元素外壳定位*/
position: absolute;
left: 0px;
top: 0px;
/*解决hover后图片闪动问题*/
pointer-events: none;
/*防止设置padding后影响盒子大小*/
box-sizing: border-box;
float: left;
display: none;
/*遮罩置于顶层*/
z-index: 999;
} .shade h3 {
text-align: center;
line-height: 50px;
}
</style>
</head> <body>
<!--外壳-->
<div class="wrap">
<!--项目-->
<div class="iteam">
<img src="http://cnblogs.cdtu6129.cn/img/TT.JPG" />
</div>
<!--遮罩-->
<div class="shade">
<h3>Tizzy T</h3>
<p>本名谢锐韬，中国内地嘻哈说唱男歌手。2010年获得华南地区Beat Box冠军。2016年推出首张个人专辑《你的男孩》。</p>
</div>
</div> </body> </html>
如有不足，欢迎指出。