一个时尚的图像库，利用CSS3动画，阴影和“ transform”属性即时地为其图像添加平滑悬停效果，从而使图像放大并靠近用户。
效果如下：
效果展示
代码如下：
代码
<!doctype html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
.hovergallery img{
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
opacity: 0.7; /*initial opacity of images*/
margin: 0 10px 5px 0; /*margin between images*/
}
.hovergallery img:hover{
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
opacity: 1;
}
</style>
</head>
<body>
<div class="hovergallery">
<img src="images/001.jpg" width="300" height="180" />
<img src="images/002.jpg" width="300" height="180" />
<img src="images/003.jpg" width="300" height="180" />
<img src="images/004.jpg" width="300" height="180" />
</div>
</body>
</html>
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css3-style/c50556.shtml
