CSS是一種非常強大的設(shè)計語言，可以實現(xiàn)許多酷炫的效果。其中之一是圖片上漂浮圖片的效果。下面是一些CSS代碼片段，演示如何實現(xiàn)這種效果。
img:hover {
position: relative;
top: -10px;
left: -10px;
z-index: 1;
}上述代碼將導(dǎo)致鼠標懸停在圖像上時，圖像會稍微上移，稍微向左移動，并且在上方浮動。z-index屬性指定圖像的堆疊順序，以便在懸停時它位于其他元素之上。
.img-container {
position: relative;
}
.img-container img {
position: absolute;
top: 0;
left: 0;
}
.img-container img:hover {
z-index: 1;
transform: translate(-10px, -10px);
}上面的代碼是更靈活的漂浮效果。首先，我們將圖像容器（通常是一個
元素）設(shè)為相對定位。然后我們的圖像設(shè)置為絕對定位，相對于容器的左上角。最后，我們將:hover樣式應(yīng)用于圖像本身。鼠標懸停時，z-index將使圖像浮在其他元素之上，transform屬性將使圖像向上和向左移動。
這些CSS代碼只是實現(xiàn)這種效果的開始。可能需要調(diào)整這些值，以確保該效果在您的設(shè)計中起作用，這里只是提供一些基礎(chǔ)知識。