效果体验：http://hovertree.com/texiao/jquery/7.htm
HTML文件代码：
<!DOCTYPE html><htmlxmlns="http://www.w3.org/1999/xhtml"><head><title>鼠标滑过图片变暗文字链接滑出jQuery特效 - HoverTree</title><basetarget="_blank"/><scriptsrc="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script></head><body><styletype="text/CSS">*{margin:0;padding:0;list-style-type:none;}a, img{border:0;text-decoration:none;}body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";background:#333;color:white;}.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}.clearfix{display:inline-table;}/*Hides from IE-mac*/*html .clearfix{height:1%;}.clearfix{display:block;}/*End hide from IE-mac*/* + html .clearfix{min-height:1%;}/*hovertreeaction*/.hovertreeaction{width:981px;margin:40px auto 0 auto;overflow:hidden;}.hovertreeaction ul{width:996px;}.hovertreeaction ul li{float:left;margin-right:14px;margin-bottom:13px;display:inline;width:318px;height:343px;overflow:hidden;position:relative;}.hovertreeaction ul li .photo{width:318px;height:343px;overflow:hidden;}.hovertreeaction .rsp{width:318px;height:343px;overflow:hidden;position:absolute;background:#000;top:0px;left:0px;}.hovertreeaction .text{position:absolute;width:318px;height:343px;left:-318px;top:0px;overflow:hidden;}.hovertreeaction .text h3{width:318px;margin-top:130px;height:55px;line-height:55px;text-align:center;color:#FFFFFF;background:#000000;font-family:"microsoft yahei";font-size:26px;}#foot_bm a, #foot_bm, p, p a{color:#666;}</style><divclass="hovertreeaction"><h1>鼠标滑过图片变暗文字链接滑出jQuery特效</h1><
br/><ulclass="clearfix"><li><divclass="photo"><imgsrc="http://s1.knowsky.com/20151016/d3sze4y2fly39.jpg"width="318"height="343"/></div><divclass="rsp"></div><divclass="text"><ahref="http://hovertree.com/"><h3>HoverTree</h3></a></div></li><li><divclass="photo"><imgsrc="http://hovertree.com/texiao/jquery/7/2.jpg"width="318"height="343"/></div><divclass="rsp"></div><divclass="text"><ahref="http://hovertree.com/menu/jquery/"><h3>何问起</h3></a></div></li><li><divclass="photo"><imgsrc="http://hovertree.com/texiao/jquery/7/3.jpg"width="318"height="343"/></div><divclass="rsp"></div><divclass="text"><ahref="http://keleyi.com/"><h3>柯乐义</h3></a></div></li><li><divclass="photo"><imgsrc="http://hovertree.com/texiao/jquery/7/4.jpg"width="318"height="343"/></div><divclass="rsp"></div><divclass="text"><ahref="http://hovertree.com/menu/csharp/"><h3>C Sharp</h3></a></div></li><li><divclass="photo"><imgsrc="http://hovertree.com/texiao/jquery/7/5.jpg"width="318"height="343"/></div><divclass="rsp"></div><divclass="text"><ahref="http://tool.keleyi.com/"><h3>Keleyi</h3></a></div></li><li><divclass="photo"><imgsrc="http://hovertree.com/texiao/jquery/7/6.gif"width="318"height="343"/></div><divclass="rsp"></div><divclass="text"><ahref="http://hovertree.com/texiao/"><h3>网页特效</h3></a></div></li></ul><divclass="clear"></div><ahref="http://hovertree.com/hvtart/bjae/o8b7w9u8.htm"style="color:white;">原文</a></div><script>$(document).ready(function(){
$(".hovertreeaction ul li .rsp").hide();
$(".hovertreeaction ul li").hover(function(){
$(this).find(".rsp").stop().fadeTo(500,0.5)
$(this).find(".text").stop().animate({left:'0'}, {duration:500})
},function(){
$(this).find(".rsp").stop().fadeTo(500,0)
$(this).find(".text").stop().animate({left:'318'}, {duration:"fast"})
$(this).find(".text").animate({left:'-318'}, {duration:0})
});
});</script></body></html>
Web前端资源汇总 : http://www.cnblogs.com/jihua/p/webfront.html