CSS滾輪放大圖片是一種網頁設計中常見的交互效果，它可以提升用戶瀏覽體驗和網站的美觀程度。下面將以一個實例來介紹如何通過CSS來實現這種效果。

/*HTML部分*/
<div class="image">
<img src="example.jpg">
</div>
/*CSS部分*/
.image{
position: relative;
width: 400px;
overflow: hidden;
}
.image img{
position: absolute;
width: 100%;
height: auto;
transition: transform 0.5s;
}
.image:hover img{
transform: scale(1.2);
}

首先，我們需要將圖片嵌套在一個容器中。這個容器需要有一定的寬度和高度，并設置為overflow:hidden以隱藏超出容器范圍的部分。然后，將圖片設置為絕對定位，并設置寬度為100%和高度自適應，這樣圖片寬度就可以隨著容器的寬度而變化。接下來，設置圖片的過渡效果為transform 0.5s，這樣當鼠標懸浮在圖片上時，圖片就會以0.5秒的時間將大小從原來的1倍放大到1.2倍。最后，在容器上使用:hover偽類選擇器，當鼠標懸浮在容器上時，子元素（也就是圖片）就會放大。

通過這個實例，我們可以看到CSS實現滾輪放大圖片的方式非常簡單，只需要幾行代碼就可以實現。這種效果可以用于網站的產品展示、圖片集、畫廊等頁面，讓用戶能夠更好地瀏覽和觀看網站內容。