<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery鼠标移上图片半透明遮罩效果</title>
<style>
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{color:#898989;font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
a{color:#898989;text-decoration:none}
a:hover{cursor:pointer;color:#9f8054;}
/* 代码整理：懒人之家 www.ui3g.com */
.sgw_img{width:981px;height:382px;overflow:hidden;border:1px solid #dcdcdc;padding:3px;margin:40px auto 0 auto;}
.sgw_img dt{margin-right:3px;float:left;display:inline;width:315px;height:382px;position:relative;overflow:hidden;}
.sgw_img dd{float:left;position:relative;overflow:hidden;}
.sgw_img_dd1{width:196px;height:382px;float:left;margin-right:3px;display:inline;}
.sgw_img_dd1 dd{height:125px;overflow:hidden;float:left;}
.sgw_img_dd1 #dd2{margin:3px 0px 4px 0;}
.sgw_img_dd2{float:left;width:464px;height:382px;overflow:hidden;}
.sgw_img_dd2 dd{margin-right:3px;height:207px;overflow:hidden;display:inline;}
.sgw_img_dd2 dd#dd3, .sgw_img_dd2 dd#dd4{margin:0;}
.sgw_img_dd2 dd#dd3, .sgw_img_dd2 dd#dd5{margin-bottom:3px;height:172px;}
.box{width:100%;height:100%;background:url('') no-repeat left top #020000;position:absolute;left:0;line-height:18px;color:#e69714;top:-382px;filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8;text-align:center;padding-top:30px;}
.box h3{color:#fff;font-size:14px;font-weight:bold;}
.box a{display:block;margin-top:5px;}
.sgw_img dt .box{padding-top:100px;top:-482px;}
</style>
</head>
<body>
<!--代码部分begin-->
<dl class="sgw_img">
<dt>
<img src="http://www.ui3g.com/upload/2014-09/3527dee760e848b59db.jpg" width="315" height="382"/>
<div class="box">
<h3>照片内容的描述信息</h3>
<p>介绍...</p>
<a href="http://www.ui3g.com/">查看详细</a>
</div>
</dt>
<div class="sgw_img_dd1">
<dd>
<img src="http://www.ui3g.com/ui3gimg/2014/imgui/2c29c8561f1a4d5f903.jpg" width="196" height="125"/>
<div class="box">
<h3>标题</h3>
<p>介绍...</p>
<a href="http://www.ui3g.com/">查看详细</a>
</div>
</dd>
<dd id="dd2">
<img src="http://www.ui3g.com/ui3gimg/2014/imgui/3c0f09ab26ed48c1953.jpg" width="196" height="126"/>
<div class="box">
<h3>标题</h3>
<p>介绍...</p>
<a href="http://www.ui3g.com/">查看详细</a>
</div>
</dd>
<dd>
<img src="http://www.ui3g.com/ui3gimg/2015/img27ui/3028152129%5B1%5D.jpg" width="196" height="125"/>
<div class="box">
<h3>标题</h3>
<p>介绍...</p>
<a href="http://www.ui3g.com/">查看详细</a>
</div>
</dd>
</div>
<div class="sgw_img_dd2">
<dd id="dd5">
<img src="http://www.ui3g.com/ui3gimg/2014/imgui/c1132b83c7b4443e947.jpg" width="284" height="172"/>
<div class="box">
<h3>标题</h3>
<p>介绍...</p>
<a href="http://www.ui3g.com/">查看详细</a>
</div>
</dd>
<dd id="dd3">
<img src="http://www.ui3g.com/ui3gimg/2015/img27ui/29731-14121R011060-L%5B1%5D.jpg" width="176" height="172"/>
<div class="box">
<h3>标题</h3>
<p>介绍...</p>
<a href="http://www.ui3g.com/">查看详细</a>
</div>
</dd>
<dd>
<img src="http://www.ui3g.com/ui3gimg/2015/img27ui/29711-1412030952540-L%5B1%5D.jpg" width="152" height="207"/>
<div class="box">
<h3>标题</h3>
<p>介绍...</p>
<a href="http://www.ui3g.com/">查看详细</a>
</div>
</dd>
<dd>
<img src="http://www.ui3g.com/ui3gimg/2015/img27ui/2269173857%5B1%5D.jpg" width="152" height="207"/>
<div class="box">
<h3>标题</h3>
<p>介绍...</p>
<a href="http://www.ui3g.com/">查看详细</a>
</div>
</dd>
<dd id="dd4">
<img src="http://www.ui3g.com/ui3gimg/2015/img27ui/2546163496%5B1%5D.jpg" width="152" height="207"/>
<div class="box">
<h3>标题</h3>
<p>介绍...</p>
<a href="http://www.ui3g.com/">查看详细</a>
</div>
</dd>
</div>
</dl>
<script src="http://www.ui3g.com/Scripts/jquery-1.7.2.js"></script>
<script>
$(function(){
$('.sgw_img dt').hover(function(){
$(this).children('.box').stop(true,true).delay(100).animate({'top':0,opacity:0.8},300);
},function(){
$(this).children('.box').stop(true,true).animate({'top':-482,opacity:0},200);
})
$('.sgw_img dd').hover(function(){
$(this).children('.box').stop(true,true).delay(100).animate({'top':0,opacity:0.8},300);
},function(){
$(this).children('.box').stop(true,true).animate({'top':-382,opacity:0},200);
})
})
</script>
<!--代码部分end-->
</body>
</html>
