CSS+圖片浮于div是一種常見的前端效果，可以讓網頁內容更加豐富、有趣。下面我們來詳細介紹一下這種效果的實現方法。

/* CSS代碼 */
.box {
position: relative; /* 相對定位 */
width: 200px;
height: 200px;
border: 1px solid #333;
overflow: hidden; /* 隱藏超出容器的內容 */
}
.box img {
position: absolute; /* 絕對定位 */
width: 100%;
height: 100%;
left: 0;
z-index: -1; /* 將圖片放在容器底部 */
}
.box:hover img {
transform: scale(1.2); /* 鼠標懸停時放大 */
}

以上是該效果的核心CSS代碼。首先，我們需要在一個div容器中放置一張圖片。因為后面會對圖片進行絕對定位，所以需要將容器設置為相對定位，并隱藏超出容器的內容。

接下來對圖片進行絕對定位，并將其放在容器底部。為了讓圖片能夠響應鼠標事件，我們需要設置圖片z-index為-1，這樣圖片處于最底部，但是鼠標事件卻能夠“穿透”到它。

最后，為容器設置:hover偽類，當鼠標懸停在容器上時，對其內部的圖片進行縮放，這樣就實現了圖片浮在容器上的效果。

通過這種方法，我們能夠為網頁增加一些趣味性，提升用戶體驗。