html 部分：
<div class="img-container">
<div class="hander1">
<img src="img/inner.png" / class="hander">
<img src="img/outer.png" class="img-outer" />
</div>
<div class="hander1" style="float:right;">
<img src="img/inner.png" / class="hander">
<img src="img/outer.png" class="img-outer" />
</div>
</div>
css 部分：
.img-container .hander1{
width:318px;
height:231px;
margin-top: 15px;
margin-left: 10px;
overflow: hidden;
position: relative;
float: left;
z-index: 999;
}
.img-container img{
display: inline-block;
position: absolute;
border: 1px solid #ccc;
}
.img-container .img-outer{
display: none;
position: absolute;
top:-216px;
border: 1px solid #ccc;
}
js 部分：
$(".hander1").hover(function(){
$(this).find(".img-outer").css({
"display": "block"
}).animate({
top: "0px"
});
}).on({
mouseleave: function() {
$(this).find(".img-outer").animate({
"top": "-231px",
})
}
})