在Web開發(fā)中，經(jīng)常需要用到圖片。當(dāng)圖片過大時(shí)，我們通常會(huì)將其縮小以適應(yīng)頁面大小。但如果想在鼠標(biāo)懸浮時(shí)放大圖片，該怎么實(shí)現(xiàn)呢？這時(shí)候就可以運(yùn)用CSS超出隱藏屬性。

.img-container {
width: 200px;
height: 200px;
overflow: hidden;
position: relative;
}
.img-container:hover .enlarge-img {
transform: scale(2);
z-index: 999;
}
.enlarge-img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1);
}

以上代碼中，我們首先創(chuàng)建一個(gè)類名為img-container的div容器，用于包裹實(shí)際圖片。設(shè)置該容器大小為200px*200px，設(shè)定超出內(nèi)容隱藏。并將容器的位置設(shè)為相對(duì)定位，使其成為圖片容器的參考系。

接著，我們?cè)趇mg-container中創(chuàng)建一個(gè)類名為enlarge-img的子元素，用于實(shí)際展示圖片，并將其位置設(shè)為絕對(duì)定位。同時(shí)，為了使其居中顯示，我們使用transform將其位置向上向左移動(dòng)50%。

最后，我們?cè)贑SS的:hover偽類下，給img-container中包裹的enlarge-img設(shè)置一個(gè)放大的transform屬性，當(dāng)鼠標(biāo)懸浮在img-container上，即可實(shí)現(xiàn)圖片放大效果。

以上就是利用CSS超出隱藏屬性實(shí)現(xiàn)放大圖片的方法。使用它，我們可以更加互動(dòng)地展示圖片，吸引用戶更多的注意力。