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

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

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

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

最后，為容器設(shè)置:hover偽類，當(dāng)鼠標懸停在容器上時，對其內(nèi)部的圖片進行縮放，這樣就實現(xiàn)了圖片浮在容器上的效果。

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