效果图
=>
第一步,首先引入jquery.min.js文件
第二步,写html代码
<div class="item-wrap">
<div class="item">
<ul>
<li>
<img src="images/class1.jpg" />
<div class="text-con">
<p class="title">标题</p>
</div>
</li>
</ul>
</div>
</div>
第三步,写css代码
<style>
body,p,ul,li{
margin: 0;
padding: 0;
}
.item-wrap .item ul {
overflow:hidden;
}
.item-wrap .item ul li{
width: 297px;
height: 198px;
position: relative;
float: left;
overflow:hidden;
cursor: pointer;
}
.item-wrap .item ul li .text-con{
width: 297px;
height: 30px;
background: rgba(0,0,0,.5);
position: absolute;
left: 0;
bottom:0;
}
.item-wrap .item ul li .text-con .title{
font-size: 16px;
color: #fff;
text-align: center;
line-height: 30px;
}
</style>
第四步,写JQ代码
<script>
$(".item-wrap .item ul li").hover(function() {
/* Stuff to do when the mouse enters the element */
$(this).find(".text-con").animate({'height': '198px'}, 300);
}, function() {
/* Stuff to do when the mouse leaves the element */
$(this).find(".text-con").animate({'height': '30px'}, 300);
});
</script>