jQuery css3鼠标悬停图片显示遮罩层动画特效
效果体验：http://hovertree.com/texiao/jquery/39/
效果图：
源码下载：http://hovertree.com/h/bjaf/q9ii3dfq.htm
代码如下：
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery炫酷鼠标滑过图片显示遮罩层特效 - 何问起</title><base target="_blank" /><!--可无视-->
<link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/jquery/39/css/normalize.css" rel="external nofollow" />
<link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/jquery/39/css/default.css" rel="external nofollow" >
<link rel="stylesheet" href="http://hovertree.com/texiao/jquery/39/css/base.css" rel="external nofollow" /><!--必要样式-->
<link rel="stylesheet" href="http://hovertree.com/texiao/jquery/39/css/style.css" rel="external nofollow" /><!--[if IE]>
<script src="http://hovertree.com/texiao/html5/4/html5shiv.min.js"></script>
<![endif]--></head>
<body><div id="main">
<div class="container"><nav>
<ul>
<li><a target="_self" href="http://hovertree.com/texiao/jquery/39/index.html" rel="external nofollow" class="active">Slide In Bottom</a></li>
<li><a target="_self" href="http://hovertree.com/texiao/jquery/39/index2.html" rel="external nofollow" >Slide In Top</a></li>
<li><a target="_self" href="http://hovertree.com/texiao/jquery/39/index3.html" rel="external nofollow" >Slide In Left</a></li>
<li><a target="_self" href="http://hovertree.com/texiao/jquery/39/index4.html" rel="external nofollow" >Slide In Right</a></li>
<li><a target="_self" href="http://hovertree.com/texiao/jquery/39/index5.html" rel="external nofollow" >Icon Border Animate</a></li>
<li><a target="_self" href="http://hovertree.com/texiao/jquery/39/index6.html" rel="external nofollow" >Icon Slide In</a></li>
</ul>
</nav><!-- /nav --><div id="effect-1" class="effects clearfix">
<div class="img">
<img src="http://hovertree.com/texiao/jquery/39/img/jpg/1.jpg" alt="">
<div class="overlay">
<a href="http://hovertree.com/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="expand">+</a>
<!-- <a class="close-overlay hidden">x</a> -->
</div>
</div>
<div class="img">
<img src="http://hovertree.com/texiao/jquery/39/img/jpg/2.jpg" alt="">
<div class="overlay">
<a href="http://hovertree.com/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="expand">+</a>
<a class="close-overlay hidden">x</a>
</div>
</div>
<div class="img">
<img src="http://hovertree.com/texiao/jquery/39/img/jpg/3.jpg" alt="">
<div class="overlay">
<a href="http://hovertree.com/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="expand">+</a>
<a class="close-overlay hidden">x</a>
</div>
</div>
<div class="img">
<img src="http://hovertree.com/texiao/jquery/39/img/jpg/4.jpg" alt="">
<div class="overlay">
<a href="http://hovertree.com/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="expand">+</a>
<a class="close-overlay hidden">x</a>
</div>
</div>
</div></div><!-- /.container -->
</div><script type="text/javascript" src="http://hovertree.com/ziyuan/jquery/jquery-2.2.1.min.js"></script>
<script type="text/javascript" src="http://hovertree.com/texiao/jquery/39/js/modernizr.js"></script>
<script type="text/javascript">
$(document).ready(function(){
if (Modernizr.touch) {
// show the close overlay button
$(".close-overlay").removeClass("hidden");
// handle the adding of hover class when clicked
$(".img").click(function(e){
if (!$(this).hasClass("hover")) {
$(this).addClass("hover");
}
});
// handle the closing of the overlay
$(".close-overlay").click(function(e){
e.preventDefault();
e.stopPropagation();
if ($(this).closest(".img").hasClass("hover")) {
$(this).closest(".img").removeClass("hover");
}
});
} else {
// handle the mouseenter functionality
$(".img").mouseenter(function(){
$(this).addClass("hover");
})
// handle the mouseleave functionality
.mouseleave(function(){
$(this).removeClass("hover");
});
}
});
</script></body>
</html>
