當我們在網站中遇到一張圖片時，我們可能會想要更仔細地觀察它，以便更好地了解其細節。在這種情況下，放大圖片可能是一種非常有用的工具。一種常見的方法是使用CSS將鼠標懸停在圖片上時對其進行放大。 實現這個效果的第一步是創建CSS類，該類實現對鼠標懸停的響應。我們可以使用:hover偽類選擇器來實現這一點。下面是一個簡單的示例：

img:hover {
transform: scale(1.5);
}

上面的代碼將在鼠標懸停在圖片上時將其放大1.5倍。 但是，僅僅這樣不太夠。當我們將鼠標移到圖像上時，圖像會跳動并且周圍的元素會發生位移。為防止這種情況發生，我們需要將圖像設置為絕對定位并通過設置其父元素作為相對定位來避免圖像跳動。

div {
position: relative;
}
img {
position: absolute;
top: 0;
left: 0;
transition: transform .3s ease;
}
div:hover img {
transform: scale(1.5);
}

上面的代碼中，我們使用div元素將圖像包裹起來，并將其設為相對定位。然后，我們對圖像應用絕對定位，并設置其上邊和左邊都為0。最后，我們將過渡設置為0.3秒，并使用:hover偽類選擇器將圖像的縮放效果綁定到div元素的懸停事件上。 使用上述代碼，我們就可以創建簡單的圖像放大效果。當鼠標移到圖像上時，它會更大，并且周圍的元素不會發生位移，使用戶能夠更好地觀察圖像的細節。