html,body {
height:100%;
overflow:hidden;
}
#wrap {
width:1200px;
height:100%;
margin:0px auto;
}
#wrap ul li {
position:relative;
float:left;
width:230px;
height:360px;
list-style:none;
margin-right:12px;
overflow:hidden;
}
#wrap ul li img {
display:block;
}
#wrap ul li .cover {
position:absolute;
width:230px;
height:360px;
top:0px;
left:230px;
background:url(http://www.jq22.com//tp/4c9e0259-fb7b-498d-9e06-fe841bf4dd71.png);
}
#wrap ul li .cover p {
font-size:14px;
color:#fff;
text-align:center;
}
#wrap ul li .cover p.p1 {
padding-top:160px;
}
遮罩图可根据鼠标从不同方向移入,而改变移入的方向