1.改變background-size屬性

將圖片作為某個html元素的背景圖片，用transition屬性改變圖片的大小。

1 .container{
2     background-size: 100% 100%;
3     transition: all 2s;    
4 }
5 .container:hover{
6     background-size: 120% 120%;
7 }

這種方法有個問題是圖片縮放的時候會出現抖動的現象

2.利用scale

使用img標簽，並在img標簽上添加transform屬性改變scale值

1 img{
2    transition
 
: all 2s;
3 }
4 img:hover{
5    transform: scale(1.2);  
6 }

這種方法能夠獲得比較平滑的縮放效果

利用CSS3實現鼠標懸停在圖片上圖片緩慢縮放的兩種方法