一
在現在的網頁設計中，滑鼠移到圖檔上圖檔放大的效果常常被用到，這個效果多應用于文章清單裡。我一開始以為是用JQuery來實作的，後來才知道原來是用CSS3來實作的。雖然用JQuery也能實作同樣的效果，但用CSS3來實作會更加簡單和友善。本文将介紹如何用CSS3來實作這個功能。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
width: 200px;
height: 138px;
border: #000 solid 1px;
margin: 50px auto;
overflow: hidden;
}
#div1 img{
cursor: pointer;
transition: all 0.6s;
}
#div1 img:hover{
transform: scale(1.4);
}
</style>
</head>
<body>
<div id="div1">
<img src="demo.jpg" />
</div>
</body>
</html>
代碼分析：
1、首先知道DIV和IMG的層次關系，IMG是在某DIV裡面，圖檔放大後不應該超出DIV的盒子。
2、設定DIV的 overflow: hidden; 屬性，作用是圖檔變大後超過DIV區域的部分會自動隐藏。
3、設定 transition: all 0.6s; 屬性和 transform: scale(1.4); 屬性，其中 transition: all 0.6s; 是變化速度，數值越小速度越快，而 transform: scale(1.4); 是變化範圍， scale(1.4) 是放大1.4倍的意思。
二
如果想圖檔放大後完全顯示，而不是隻顯示DIV裡的區域，那麼我們隻需把div的 overflow 屬性去掉即可，不能設為 auto ，否則div出現滾動條。
代碼分析：
把div的 overflow 屬性去掉，其他代碼不變。
原文連接配接
http://www.webkaka.com/tutorial/html/2017/072731/![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)