1、實作效果
當滑鼠經過圖檔，圖檔會逐漸放大，仿佛你距離圖檔越來越近,常在旅遊、商品的展示頁面應用。
2、實作思路
（1）使用 scale 函數放大圖檔
（2）使用transition實作逐漸變化的動畫。
（3）使用 overflow: hidden; 控制圖檔在圖檔外圍盒子中。
3、源代碼
素材：
圖檔一張
bl.jpg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS實戰-滑鼠經過動畫</title>
<style type="text/css">
.photo {
overflow: hidden;
position: relative;
width:290px;
height:376px;
float:left;
}
.photo img{
width:100%;
height:auto;
}
.photo:hover img{
-webkit-transform:scale(1.15);
-moz-transform:scale(1.15);
-o-transform:scale(1.15);
transform:scale(1.15);
-webkit-transition:all 2s ease;
-moz-transition:all 2s ease;
-o-transition:all 2s ease;
transition:all 2s ease;
}
</style>
</head>
<body>
<div class="photo">
<!--部落格bug，需要調整下面一行代碼-->
< img src="bl.jpg " border="0" >
</div>
</body>
</html>
![一位經驗豐富的前端開發人員因未能通過算法面試題而受人嘲笑[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)