CSS鼠標懸停圖片縮小是一種常見效果，可以讓網頁更生動、更有趣。它的實現方法主要是通過CSS的:hover偽類和transform屬性實現。

img {
transition: transform 0.2s;
}
img:hover {
transform: scale(0.9);
}

以上代碼使用了transition屬性和hover偽類，設置了當鼠標懸停在圖片上時，圖片會在0.2秒的時間內縮小至原來的0.9倍。其中，transition屬性用于實現漸變效果，避免圖片突然變化；而transform屬性則是用來改變圖片的尺寸和位置。

需要注意的一點是，transform屬性對于元素的定位和尺寸會有一定的影響。因此，為了保證效果正確，我們需要確保圖片有一個明確的位置和尺寸。比如，可以將圖片放在一個div容器中，并設置容器的寬度和高度。

.image-container {
width: 300px;
height: 200px;
}
.image-container img {
width: 100%;
height: 100%;
transition: transform 0.2s;
}
.image-container img:hover {
transform: scale(0.9);
}

以上代碼使用了一個div容器，包含了一張圖片。我們可以設置容器的寬度和高度，確保圖片有一個明確的位置和大小。然后，在CSS中，我們為圖片設置了寬度和高度100%的值，以確保圖片占滿整個容器。當鼠標懸停在圖片上時，由于設置了:hover偽類，圖片會縮小至原來的0.9倍，實現了鼠標懸停圖片縮小的效果。

總的來說，鼠標懸停圖片縮小是一種簡單而有趣的效果，可以提升網頁的視覺效果和用戶體驗。我們只需要使用CSS的:hover偽類和transform屬性，就可以輕松實現這一效果。