今天我分享一下如何用CSS實現圖片預覽效果。在我們網站的某些頁面，如果能夠通過鼠標放上去就能預覽圖片，這無疑能給用戶帶來更好的體驗。那么具體該怎么實現呢？ 首先，我們要準備一張需要預覽的圖片。在這里我用了一張貓咪的圖片。

<img src="cat.jpg">

接下來，我們給圖片加上一個容器。這個容器要用到CSS中的position屬性來定位，以便于后面隱藏和顯示。

<div class="image-container">
<img src="cat.jpg">
</div>

接著，我們需要設置圖片和容器的樣式。首先，圖片的高度和寬度要設置成100%。由于圖片只是我們放置在容器中的一部分，因此我們還需要設置容器的寬度和高度。

.image-container {
position: relative;
width: 400px;
height: 300px;
overflow: hidden;
}
.image-container img {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
transition: transform 0.5s ease;
}
.image-container:hover img {
transform: scale(1.2);
}

我們在圖片的hover狀態時，設置其scale屬性達到預覽效果。 最后，我們可以在網頁中測試一下這個效果。 至此，我們成功用CSS實現了圖片預覽效果。希望本文能對大家有所幫助。