在網頁設計中，經常會遇到需要將圖片進行放大效果展示，在許多情況下，我們需要通過CSS來完成這個效果。下面我們來講解一下如何用CSS來制作一個圓形圖片放大效果。

HTML代碼：
<div class="container">
<img src="image.jpg" alt="圖片">
</div>
CSS代碼：
.container {
position: relative;
width: 250px;
height: 250px;
border-radius: 50%;
overflow: hidden;
}
.container:hover img {
transform: scale(1.2);
transition: all 0.3s ease-in-out;
}
.container img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 100%;
height: 100%;
transition: all 0.3s ease-in-out;
}

首先在HTML中創建一個div容器，用于包含圖片。在CSS中，我們將容器設為相對定位，設置容器的寬度、高度和圓角半徑為50%，同時，將溢出內容隱藏，以達到圓形效果。

接下來，在容器hover的時候，將圖片放大為原來的1.2倍并添加動畫效果，實現放大的效果。圖片本身的定位為絕對定位，寬高為100%，設定圖片為自動居中，設置圖片的過渡動畫效果。

通過這個CSS代碼，我們就能制作出一個圓形圖片放大效果，當鼠標懸浮在圖片上時，可以讓圖片自動放大，不僅能提高網頁的美觀度，也讓用戶更加直觀的了解圖片的細節。