CSS3实现美妙的图片悬停特效

 

Jquery可以产生很多图片特效，现在CSS3也可以轻易的做到这一点。

 

同样的需要webkit支持(Chrome Safari)

 

原文地址：http://webdesignersdesk.com/2010/06/fancy-image-hover-using-css3/

 

 

步骤：

 

1.利用-webkit-transform:scale(0.6);设置原始的图片大小，微微缩放，使得鼠标悬停后可以得到放大图片的效果。

 

2.设置属性变换的时间 -webkit-transition-duration:  0.5s; 这样改变对象属性就会产生类似动画的效果。

 

3.设置图片上层Layer的属性，如不透明度。 CSS3天生支持不透明度设置。

 

4.剩下的就是在：hover伪类中修改图片及上层Layer的属性了。

 

.images{ float:left; margin-left:-20px; margin-right:-20px; margin-top:10px; -webkit-transform:scale(0.6);/*Initial size of image when page loads*/ -webkit-transition-duration: 0.5s;/*Time taken for image to animate from smaller size to bigger size*/ } .images:hover{ -webkit-transform:scale(0.8);/*When hover on images image size will increased*/ -webkit-box-shadow:0px 0px 40px #ccc; } .images .layer{ width: 100%; height: 100%; background-color:#000; position: absolute; opacity:0.5; -webkit-transition-duration: 0.8s; } #image1:hover .layer{ width:0%; } #image2:hover .layer{ height:0%; } #image3:hover .layer { height:0%; margin-top:150px; } #image4:hover .layer{ margin-left:150px; margin-top:150px; height:0%; width:0%; }