<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片遮罩效果</title>
<style type="text/css">
.wrapper{
width: 266px;
height: 250px;
border: 1px solid #ccc;
background:url(2.png) 0 0 no-repeat;
margin: 20px auto;
position: relative;
overflow: hidden;
background-position: center;
}
.wrapper hgroup{
position: absolute;
left: 0;
top: -250px;
width: 266px;
height: 250px;
background: rgba(0,0,0,0,5);
transition: all 0.5s ease-in 0s;
}
.wrapper:hover hgroup{
position: absolute;
left: 0;
top: 0;
background: url(1.png) 0 0 no-repeat;
background-position: center;
}
.wrapper hgroup h2:nth-child(1){
font-size: 22px;
text-align: center;
color: aqua;
font-weight: normal;
margin-top: 58px;
}
.wrapper hgroup h2:nth-child(2){
font-size: 14px;
text-align: center;
color: aqua;
font-weight: normal;
}
.wrapper hgroup h2:nth-child(3){
width: 26px;
height: 26px;
margin-left: 120px;
margin-top: 15px;
background: url(jiantou.png) 0 0 no-repeat;
}
.wrapper hgroup h2:nth-child(4){
width: 75px;
height: 22px;
margin-left: 95px;
margin-top: 25px;
background: url(anniu.png) 0 0 no-repeat;
}
</style>
</head>
<body>
<div class="wrapper">
<hgroup>
<h2> 黑布林精品大李子 </h2>
<h2> 一点也不酸 </h2>
<h2></h2>
<h2></h2>
</hgroup>
</div>
</body>
</html>
