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：

    <div class="box">
        <a href="#" class="btn">确定</a>
        <div class="img"><div></div></div>
    </div>