css自定义遮罩滑动

//js

$('.pro_item').hover(function(){
    $(this).find('.fous_bg').show().animate({marginTop:'0px'},1000);
},function(){
    $(this).find('.fous_bg').animate({marginTop:'300px'},1000);
});
$('.select_detail').hover(function(){
    $(this).find('.btn_detail').show().animate({marginTop:'0px'},1000);
},function(){
    $(this).find('.btn_detail').animate({marginTop:'300px'},1000);
});

//html

<div class="col-md-3 pd col-sm-3 col-xs-3 pro_item">
    <ul>
        <li>省行</li>
        <li style="position: absolute">
            <img class="imgclick" src="img/shenghang.png">
        </li>
        <li class="item_bg" style="position: absolute;">
            <div class=" fous_bg"></div>
            <div class="select_detail" style="width: 280px;height: 289px;position: absolute">
                <span class="btn_detail">查看详情</span>
            </div>
        </li>
    </ul>
</div>

//css

.pro_item{height:300px;position: relative}
.pro_item .item_bg .fous_bg{
    position: absolute;
    display: none;
    width:282px;height:289px;
    left: 0;
    /*padding-top: 80%;*/
    background:black;
    opacity: 0.5;
}
.btn_detail{
    display: none;
    position:absolute;
    z-index: 999;
    line-height: 44px;
    border-radius: 2px;
    font-size: 18px;
    font-weight: bold;
    top: 70%;
    left: 27%;
    width: 126px;
    height: 44px;
    background-color: white;
    color:#cbaa77;
    cursor: pointer;
}