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='/images/loading.gif' data-original="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='/images/loading.gif' data-original="http://hovertree.com/texiao/jquery/39/img/jpg/1.jpg" ><div class="overlay"><a href="http://hovertree.com/" class="expand">+</a><!-- <a >x</a> --></div></div><div class="img"><img src='/images/loading.gif' data-original="http://hovertree.com/texiao/jquery/39/img/jpg/2.jpg" ><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='/images/loading.gif' data-original="http://hovertree.com/texiao/jquery/39/img/jpg/3.jpg" ><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='/images/loading.gif' data-original="http://hovertree.com/texiao/jquery/39/img/jpg/4.jpg" ><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='/images/loading.gif' data-original="http://hovertree.com/ziyuan/jquery/jquery-2.2.1.min.js"></script><script type="text/javascript" src='/images/loading.gif' data-original="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>转自：http://hovertree.com/h/bjaf/q9ii3dfq.htm
更多特效：http://www.cnblogs.com/roucheng/p/texiao.html
原标题：jQuery css3鼠标悬停图片显示遮罩层动画特效
关键词：CSS
我知道了 