图片悬停放大效果：
HTML5 代码如下：
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3图片悬停放大动画</title>
<link rel="stylesheet" href="css/image-hover.css" type="text/css">
<link rel="stylesheet" href="css/image-hover-main.css" type="text/css">
</head>
<body>
<div id="image-container">
<div class="img" id="img-1">
<div class="mask"></div>
<img src="img/01.jpg">
</div>
<div class="img" id="img-2">
<div class="mask"></div>
<img src="img/07.jpg">
</div>
<div class="img" id="img-3">
<div class="mask" id="mask-1"></div>
<div class="mask" id="mask-2"></div>
<img src="img/05.jpg">
</div>
<div class="img" id="img-4">
<div class="mask"></div>
<img src="img/04.jpg">
</div>
<div class="img" id="img-5">
<div class="mask"></div>
<img src="img/06.jpg">
</div>
<div class="img" id="img-6">
<div class="mask"></div>
<img src="img/08.jpg">
</div>
<div class="clearfix"></div>
</div></body>
</html>
另外附上两个css 样式(image-hover.css 和 image-hover-main.css)：
image-hover.css
.img{
-webkit-transform:scale(0.6);
-moz-transform:scale(0.6);
-o-transform:scale(0.6);
float:left;
margin-left:-50px;
margin-right:-50px;
margin-top:-10px;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
}
.img img{
padding:10px;
border:1px solid #fff;
}
.img:hover{
-webkit-transform:scale(0.8);
-webkit-box-shadow:0px 0px 30px #ccc;
-moz-transform:scale(0.8);
-moz-box-shadow:0px 0px 30px #ccc;
-o-transform:scale(0.8);
-o-box-shadow:0px 0px 30px #ccc;
}
.img .mask{
width: 100%;
background-color: rgb(0, 0, 0);
position: absolute;
height: 100%;
opacity:0.6;
cursor:pointer;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration:0.5s;
}
#img-1:hover .mask{
height:0%;
}
#img-2:hover .mask{
