CSS鼠標移上換圖片是前端開發常用的效果之一，它可以提高頁面的交互性和美觀度。下面我們來介紹如何實現這一效果。

首先，我們需要準備兩張圖片，一張是默認顯示的圖片，另一張是鼠標移上去顯示的圖片。

<img src="default.jpg" alt="默認圖片" id="pic">

接下來是CSS樣式的設置。我們需要設置兩個類，一個是默認樣式類，一個是鼠標移上去樣式類。在默認樣式類中，我們設置默認圖片的寬度和高度。在鼠標移上去樣式類中，我們設置鼠標移上去顯示的圖片。這里我們使用了background-image屬性，將移上去的圖片設置為背景圖。同時，我們也可以設置鼠標移上去后的圖片的寬度和高度。

<style>
.default {
width: 200px;
height: 200px;
}
.hover {
background-image: url(hover.jpg);
width: 300px;
height: 300px;
}
</style>

最后，我們需要使用JavaScript代碼，當鼠標移上去時，將圖片的類名由default更改為hover，實現鼠標移上去換圖片的效果。

<script>
var pic = document.getElementById('pic');
pic.addEventListener('mouseover', function() {
pic.className = 'hover';
});
pic.addEventListener('mouseout', function() {
pic.className = 'default';
});
</script>

通過以上步驟，我們就實現了鼠標移上去換圖片的效果。這一效果可以應用在圖片輪播、浮動窗口等場景中，給用戶帶來更好的體驗。