关键部分代码,图片设置transition
.container a img {
/*width:100%;*/
cursor:pointer;
transition:all 0.3s;
}
例子部分
html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>缩放效果</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<a href="#">
<div class="imgBox"><img src="images/1.jpg" alt=""></div>
</a>
<a href="#">
<div class="imgBox"><img src="images/2.jpg" alt=""></div>
</a>
<a href="#">
<div class="imgBox"><img src="images/3.jpg" alt=""></div>
</a>
<a href="#">
<div class="imgBox"><img src="images/4.jpg" alt=""></div>
</a>
</div>
</body>
</html>
css部分代码
body,div,a,img{
margin:0;
padding:0;
}
.container{
padding-top:40px;
width:900px;
margin:0 auto;
}
.container a{
display:inline-block;
width:210px;
height:400px;
border:1px solid #ccc;
text-align:center;
line-height:410px;
margin-right:5px;
overflow:hidden;
}
.container a img {
/*width:100%;*/
cursor:pointer;
transition:all 0.3s;
}
.container a:hover img{
transform:scale(1.5);
}
(完)