//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;
}