鼠标移上去，元素位置移动，显示隐藏功能效果。（推荐在火狐或谷歌中观看，会有有动画效果）
效果如图：
css：
.box {
width: 200px;
height: 300px;
position: relative;
margin: 200px auto 0 auto;
}
.box:hover .img {
top: -45px;
-moz-transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
.img {
width: 192px;
height: 292px;
position: absolute;
top: 0;
left: 0;
padding: 3px;
border: 1px solid #e5e5e5;
-moz-transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
.img div {
width: 192px;
height: 292px;
background: #f7f7f7;
}
.btn {
width: 70px;
height: 25px;
line-height: 25px;
position: absolute;
display: block;
left: 50%;
bottom: 10px;
margin-left: -35px;
background: #ff464f;
text-decoration: none;
text-align: center;
font-size: 12px;
color: #fff;
}
html：
<div class="box">
<a href="#" class="btn">确定</a>
<div class="img"><div></div></div>
</div>
