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" />
<link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/jquery/39/css/default.css">
<link rel="stylesheet" href="http://hovertree.com/texiao/jquery/39/css/base.css" /> <!--必要样式-->
<link rel="stylesheet" href="http://hovertree.com/texiao/jquery/39/css/style.css" /> <!--[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" class="active">Slide In Bottom</a></li>
<li><a target="_self" href="http://hovertree.com/texiao/jquery/39/index2.html">Slide In Top</a></li>
<li><a target="_self" href="http://hovertree.com/texiao/jquery/39/index3.html">Slide In Left</a></li>
<li><a target="_self" href="http://hovertree.com/texiao/jquery/39/index4.html">Slide In Right</a></li>
<li><a target="_self" href="http://hovertree.com/texiao/jquery/39/index5.html">Icon Border Animate</a></li>
<li><a target="_self" href="http://hovertree.com/texiao/jquery/39/index6.html">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/" 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/" 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/" 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/" 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>