CSS是網頁設計中非常重要的一部分，它可以讓我們的網頁更加美觀動人。其中一種常見的效果是鼠標移入圖片時，圖片會出現模糊效果。下面我們來看一下如何實現這個效果。

//HTML代碼
<div class="image-item">
<img src="https://example.com/image.jpg" alt="圖片">
</div>
//CSS代碼
.image-item {
position: relative;
}
.image-item img {
transition: filter 0.3s ease;
}
.image-item:hover img {
filter: blur(5px);
}

首先，在HTML中，我們使用<div>標簽來包含圖片，并為其添加一個class名，方便我們在CSS中選擇它。接下來，在CSS中，我們給這個元素設置了相對定位，因為后面我們需要為圖片添加一個絕對定位的覆蓋層。然后，我們給圖片添加了一個過渡效果，并在鼠標移入時應用模糊濾鏡。

在這段CSS代碼中，我們使用了transition屬性來指定過渡效果，其中filter是我們要過渡的屬性，0.3s是過渡時間，ease是過渡函數。當鼠標移入時，我們使用:hover偽類選擇圖片，再將filter屬性值設置為blur(5px)，即為圖片應用了一個模糊濾鏡。

最后，我們可以根據需要自由調整模糊程度和過渡時間，以實現更理想的效果。這種效果可以給網頁帶來更多的美感和互動性，提升用戶體驗。