感应鼠标的图片遮罩动画效果

感应鼠标的图片遮罩动画效果

html, body, div,ul, li {
margin: 0;
padding: 0;
}
div.examples_body {
width: 750px;
margin: 0px auto;
clear: both;
overflow: hidden;
}
.bannerHolder {
width: 726px;
margin: 20px 0 15px 0;
padding: 20px 10px 20px 10px;
background-color: #f7f7f7;
border: 1px solid #eee;
overflow: hidden;
-moz-border-radius:12px;
-webkit-border-radius:12px;
border-radius:12px;
}
.bannerHolder li {
list-style: none;
display: inline;
}
.banner {
position: relative;
width: 125px;
height: 100px;
overflow: hidden;
float: left;
display: inline;
margin: 0 10px
}
.banner img {
display: block;
border: none;
}
.banner div {
position: absolute;
z-index: 100;
background-color: #222;
width: 60px;
height: 60px;
cursor: pointer;
-moz-border-radius:100px;
-webkit-border-radius:100px;
border-radius:100px;
}
.banner .cornerTL {
left:-63px;
top:-63px;
}
.banner .cornerTR {
right:-63px;
top:-63px;
}
.banner .cornerBL {
left:-63px;
bottom:-63px;
}
.banner .cornerBR {
right:-63px;
bottom:-63px;
}
.banner p {
display: none;
left: 0;
top: 57px;
width: 100%;
z-index: 200;
position: absolute;
font-family: Tahoma, Arial, Helvetica, sans-serif;
color: #FFF;
font-size: 11px;
text-align: center;
cursor: pointer;
}

$(document).ready(function(){
$('.banner div').css('opacity',0.4);
$('.banner').hover(function(){
var el = $(this);
el.find('div').stop().animate({width:200,height:200},'slow',function(){
el.find('p').fadeIn('fast');
});
},function(){
var el = $(this);
el.find('p').stop(true,true).hide();
el.find('div').stop().animate({width:60,height:60},'fast');
}).click(function(){
window.open($(this).find('a').attr('href'));
});
});

如果左下角提示错误，刷新一下就可以了。

• 

  Visit The Best Designs

• 

  Visit The Best Designs

• 

  Visit The Best Designs

• 

  Visit The Best Designs

• 

  Visit The Best Designs

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]