鼠标悬停向上滑出遮罩效果

效果如图：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
            list-style:none;
        }
        #wraper{
            height:auto;
            width:820px;
            margin:100px auto;
            overflow:hidden;
        }
        #wraper ul li{
            width:396px;
            height:165px;
            overflow:hidden;
            float:left;
            margin:0px 10px 10px 0px;
            position:relative;
        }
        #wraper ul li .text{
            width: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 >            $('.text',this).stop().animate({

//$('.text',this)指鼠标悬停的那个li的text,stop()解决鼠标悬停离开后，遮罩效果会自动多次出现，

 //保证图片的遮罩效果只有在鼠标悬停的对象上才出现，而停止其他

                height:'100px'//如果想让遮罩层充满整张图片，就把高度设置为图片高度
            });
        },function(){
            $('.text',this).stop().animate({
                height:'0'
            });
        });
    });
</script>


</body>
</html>