在網(wǎng)頁設(shè)計中，圖片不僅可以起到美化頁面的作用，還可以通過放大圖片來突出圖片的重要性，這在展示重要產(chǎn)品或宣傳活動中很常見。而CSS提供了很多方法來實現(xiàn)圖片的放大效果，其中一種方法是通過超出隱藏的樣式來實現(xiàn)。

超出隱藏是CSS中的一種樣式，可以將超出特定區(qū)域的元素進(jìn)行隱藏。在圖片放大的效果中，可以通過將圖片的容器設(shè)置為固定大小，當(dāng)圖片放大超過容器大小時，圖片就會被超出隱藏。

.img-box {
width: 300px; /* 圖片容器的寬度為300px */
height: 300px; /* 圖片容器的高度為300px */
overflow: hidden; /* 超出區(qū)域隱藏 */
}
.img-box img {
width: 100%;
height: auto; /* 保持圖片寬高比 */
transition: all 0.3s ease; /* 添加過渡效果 */
}
.img-box:hover img {
transform: scale(1.2); /* 鼠標(biāo)懸停時將圖片放大1.2倍 */
cursor: pointer; /* 鼠標(biāo)懸停時顯示手型 */
}

在上面的代碼中，首先創(chuàng)建了一個名為img-box的容器用于承載圖片，在超出區(qū)域使用了CSS的overflow:hidden樣式。當(dāng)鼠標(biāo)懸停在圖片上時，使用CSS的transform: scale(1.2)將圖片放大1.2倍，并添加了過渡效果。同時為了讓用戶知道圖片可以被點擊，還將鼠標(biāo)懸停狀態(tài)的鼠標(biāo)樣式修改為手型。

通過以上的方法，可以方便地實現(xiàn)圖片的放大效果，并使得超出容器范圍的部分自動隱藏，避免頁面的美觀度受到影響。