CSS中的懸浮效果可以讓我們的網頁更加生動有趣。其中一種常見的應用是在鼠標懸浮在某一個元素上時，實現圖片的換效果。

/* HTML代碼 */
<div class="change-img">
<img src="default-img.jpg" alt="默認圖片">
<img src="hover-img.jpg" alt="懸浮圖片">
</div>
/* CSS代碼 */
.change-img {
position: relative;
display: inline-block;
overflow: hidden;
}
.change-img img:nth-of-type(2) {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: all 0.3s ease-in-out;
}
.change-img:hover img:nth-of-type(2) {
opacity: 1;
}

上述代碼中，我們通過設置div元素的position屬性為relative，讓其成為相對定位的元素。接著，我們通過設置其display屬性為inline-block來使得其內部元素在同一行顯示，并設置overflow為hidden來控制內容的溢出。

接下來，我們在該元素內部放置兩張圖片元素，通過設置第二張圖片的position屬性為absolute，來讓其覆蓋在第一張圖片的上方。再通過設置該圖片的opacity屬性為0，來使得該圖片在默認狀態下不可見。

在CSS代碼的最后，我們通過:hover選擇器，來設置鼠標懸浮在該元素上時，第二張圖片的opacity屬性為1，從而實現圖片的換效果。

通過上述的代碼和說明，我們可以輕松地實現懸浮換圖片的效果，讓我們的網頁更加生動有趣。