CSS3是現(xiàn)代前端開發(fā)中不可或缺的一部分，它可以實現(xiàn)很多炫酷的效果。其中，鼠標懸停更改圖片效果很常見，下面就來講講如何使用CSS3來實現(xiàn)。

/* HTML */
<div class="img-box">
<img src="default.jpg">
</div>
/* CSS */
.img-box {
width: 200px;
height: 200px;
overflow: hidden;
}
.img-box img:hover {
transform: scale(1.2);
}

首先我們需要有一個裝載圖片的容器，這里選用了一個div，它的大小會限制圖片的顯示大小。而圖片則使用img標簽引入，其中src屬性指向默認的圖片。接下來，我們需要寫一個CSS選擇器，給鼠標懸停的圖片設(shè)置樣式。這里使用了:hover偽類，表示鼠標懸停在圖片上時的狀態(tài)。在樣式中，我們使用了transform屬性，它可以實現(xiàn)元素的旋轉(zhuǎn)、縮放、移動等效果。這里的縮放比例為1.2，表示鼠標懸停時圖片會放大到原來的1.2倍。

這樣，當鼠標懸停在圖片上時，就會出現(xiàn)一個放大的效果。當鼠標離開圖片時，圖片就會回到原來的大小。這個效果可以應(yīng)用于很多場景，比如商品展示、菜單顯示等。