css定位鼠标划动不动,css实现鼠标移入滑动显示功能

鼠标移上去，元素位置移动，显示隐藏功能效果。(推荐在火狐或谷歌中观看，会有有动画效果)

效果如图：

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：

确定