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; }
遮罩图可根据鼠标从不同方向移入,而改变移入的方向