jQuery悬浮遮罩显示图片或文字效果
一直在寻找一款能够实现鼠标悬浮遮罩的效果，找了好久硬是没有找到合适的，好不容易找到一个，又实际需求不一样，必须要自己修改。如下是修改后的两个效果。一个是鼠标悬浮后从下往上遮罩，一个是在当前图片上逐渐显示。
1从下往上遮罩
代码如下，为方便测试，将一下代买直接复制成HTML文件就可以看到效果了：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>jQuery遮罩显示图片文字效果</title>
<scripttype="text/javascript"src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
<styletype="text/css">
*{margin:0;padding:0;}
a,img{border:0;}
body{color:#898989;font:12px/180%Arial;}
a{color:#898989;text-decoration:none}
a:hover{cursor:pointer;color:#9f8054;}
/*容器样式*/
.light{float:left;position:relative;overflow:hidden;width:196px;height:126px;float:left;margin-right:3px;display:inline;}
/*替换元素样式*/
.box{width:100%;height:100%;background:#020000;position:absolute;left:0;line-height:18px;color:#e69714;filter:alpha(Opacity=80);-moz-opacity:0.8;opacity:0.8;text-align:center;cursor:pointer;}
</style>
<scripttype="text/javascript">
$(function(){
//容器
varlight=$('.light');
//替换元素距离顶部等于容器的高度，也就是默认在容器下方
$('.box').css('top',light.css('height'));
light.hover(
//鼠标在容器上时，替换元素移动容器上，透明度80%
function(){
$(this).children('.box').stop(true,true).delay(0).animate({'top':0,opacity:0.8},300);
//鼠标移出后，淡出
},function(){
$(this).children('.box').stop(true,true).animate({'top':$(this).css('height'),opacity:0},300);
})
})
</script>
</head>
<body>
<span>
<imgsrc="https://www.awaimai.com/wp-content/uploads/2015/12/t2.png"width="196"height="126"/>
<div>
<imgsrc="https://www.awaimai.com/wp-content/uploads/2015/12/t3.png"width="196"height="126"/>
</div>
</span>
<span>
<imgsrc="https://www.awaimai.com/wp-content/uploads/2015/12/t2.png"width="196"height="126"/>
<div>
<h3>标题</h3>
<p>介绍...</p>
<ahref="http://www.awaimai.com/">查看详细</a>
</div>
</span>
</body>
</html>
2渐渐显示遮罩
逐渐显示遮罩的方式代码更为简单，如下，不需要JQuery获取容器的高度，同样复制保存成html代码可以预览到效果：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>jQuery遮罩显示图片文字效果</title>
<scripttype="text/javascript"src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
<styletype="text/css">
*{margin:0;padding:0;}
a,img{border:0;}
body{color:#898989;font:12px/180%Arial;}
a{color:#898989;text-decoration:none}
a:hover{cursor:pointer;color:#9f8054;}
/*容器样式*/
.light{float:left;position:relative;overflow:hidden;width:196px;height:126px;float:left;margin-right:3px;display:inline;}
/*替换元素样式*/
.box{width:100%;height:100%;background:#020000;position:absolute;left:0;top:0;
line-height:18px;color:#e69714;filter:alpha(Opacity=0);-moz-opacity:0;opacity:0;text-align:center;cursor:pointer;}
</style>
<scripttype="text/javascript">
$(function(){
$('.light').hover(
//鼠标在容器上时，替换元素移动容器上，透明度80%
function(){
$(this).children('.box').stop(true,true).delay(0).animate({opacity:0.8},300);
//鼠标移出后，淡出
},function(){
$(this).children('.box').stop(true,true).animate({opacity:0},300);
})
})
</script>
</head>
<body>
<span>
<imgsrc="https://www.awaimai.com/wp-content/uploads/2015/12/t2.png"width="196"height="126"/>
<div>
<imgsrc="https://www.awaimai.com/wp-content/uploads/2015/12/t3.png"width="196"height="126"/>
</div>
</span>
<span>
<imgsrc="https://www.awaimai.com/wp-content/uploads/2015/12/t2.png"width="196"height="126"/>
<div>
<h3>标题</h3>
<p>介绍...</p>
<ahref="http://www.awaimai.com/">查看详细</a>
</div>
</span>
</body>
</html>
这两个功能借鉴站长中国素材：http://sc.chinaz.com/jiaoben/150128505800.htm。