CSS是前端工程師必備技能之一，可以幫助我們制作出更好看、交互性更強的網頁網站。其中，使用CSS可以讓鼠標經過特定的元素時，圖片自動變換，增加網頁的用戶體驗。下面我們來介紹如何實現這種效果。

/* 首先定義兩個圖片 */
img {
width: 300px;
height: 200px;
}
img.default {
background-image: url("default.jpg");
}
img.hover {
background-image: url("hover.jpg");
}

我們使用兩張圖片，一張是默認的圖片，另一張是鼠標經過時要顯示的圖片。為了方便定義樣式，我們給兩個圖片設定了公共的寬度和高度。

/* 為元素添加鼠標進入和離開時的變換效果 */
img:hover {
cursor: pointer;
background-position: center center;
background-size: cover;
transition: all 0.2s ease-in-out;
}
/* 設置默認狀態 */
img.default {
cursor: pointer;
background-position: center center;
background-size: cover;
}

接下來我們為圖片定義鼠標進入和離開時的變換效果。當鼠標進入時，我們設置了鼠標指針的樣式為手型，然后采用CSS3的transition屬性，實現圖片漸變變換的效果。我們還使用了background-position和background-size屬性，讓圖片在變換時保持居中和完整顯示。

最后，我們為默認狀態的圖片添加了相同的樣式，這樣鼠標離開圖片時，它們能夠平滑過渡，還原到默認的狀態。

現在你可以通過以上代碼，在你的網頁上實現圖片鼠標經過變換的效果啦！