CSS是前端開發中不可或缺的一種技術，它可以實現網頁的樣式美化和交互效果。其中，鼠標劃過圖片變大是一種常見的交互效果。下面就來學習一下如何通過CSS實現這種效果。

/*HTML結構*/
<div class="container">
<img src="image.png">
</div>
/*CSS樣式*/
.container {
position: relative;
}
.container img {
width: 200px;
height: auto;
transition: all 0.3s ease;
}
.container img:hover {
transform: scale(1.1);
}

首先，在HTML中定義一個容器，然后在容器內添加一張圖片。在CSS中，為容器添加相對定位，這樣就可以讓圖片的絕對定位和變形效果參照容器。然后，給圖片添加初始狀態的寬度和高度，并設置過渡效果。最后，在:hover偽類中，添加放大效果，這里使用transform的scale屬性來實現。需要注意的是，為了避免圖片過度變形，建議設置scale值小于2。

通過以上簡單的CSS代碼，就可以實現鼠標劃過圖片變大的效果，讓網頁看起來更加動態生動。