效果如图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding:0;
list-style:none;
}
#wraper{
height:auto;
820px;
margin:100px auto;
overflow:hidden;
}
#wraper ul li{
396px;
height:165px;
overflow:hidden;
float:left;
margin:0px 10px 10px 0px;
position:relative;
}
#wraper ul li .text{
100%;
height:0;//相当于隐藏遮罩层
overflow:hidden;
position:absolute; left:0; bottom:0;
background:rgba(255,90,88,0.8);
font-size:12px;
color:#fff;}
#wraper ul li .text p{
text-align:left;
color:#fff;
line-height:180%;
padding:5px 10px;
clear:both
}
#wraper ul li .text b{
display:block;
padding:5px 10px;
float:left;
background:#333;
margin-bottom:5px;
}
</style>
</head>
<body>
<div id="wraper">
<ul>
<li>
<a href="#"><img src="images/2.jpg" /></a>
<div class="text">
<b>this is text</b>
<p>If we encounter a man of rare intellect, we should ask him what books he reads.</p></div>
</li>
<li>
<a href="#"><img src="images/2.jpg" /></a>
<div class="text">
<b>this is text</b>
<p>If we encounter a man of rare intellect, we should ask him what books he reads.</p></div>
</li>
<li>
<a href="#"><img src="images/2.jpg" /></a>
<div class="text">
<b>this is text</b>
<p>If we encounter a man of rare intellect, we should ask him what books he reads.</p></div>
</li>
<li>
<a href="http://sc.chinaz.com/"><img src="images/2.jpg" /></a>
<div class="text">
<b>this is text</b>
<p>If we encounter a man of rare intellect, we should ask him what books he reads.</p></div>
</li>
</ul>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(function(){
$('#wraper li').hover(function(){
$('.text',this).stop().animate({
//$('.text',this)指鼠标悬停的那个li的text,stop()解决鼠标悬停离开后，遮罩效果会自动多次出现，
//保证图片的遮罩效果只有在鼠标悬停的对象上才出现，而停止其他
height:'100px'//如果想让遮罩层充满整张图片，就把高度设置为图片高度
});
},function(){
$('.text',this).stop().animate({
height:'0'
});
});
});
</script>
</body>
</html>