CSS懸浮顯示圖片是一種常見的網(wǎng)頁設(shè)計效果，通過鼠標懸浮在某個文本或圖標上，可以實現(xiàn)圖片或內(nèi)容的快速預(yù)覽。下面是一段示例 CSS 代碼實現(xiàn)懸浮顯示圖片效果：

.hover-img {
position: relative;
display: inline-block;
}
.hover-img:hover .img-preview {
display: block;
}
.img-preview {
position: absolute;
top: 20px;
left: 20px;
z-index: 999;
display: none;
}

上面的代碼中，定義了一個類名為 ".hover-img" 的元素，將圖片的父元素設(shè)置為相對定位。同時，在 ".hover-img:hover .img-preview" 中控制鼠標懸浮時顯示 ".img-preview" 元素。

<div class="hover-img">
<img src="example.jpg">
<div class="img-preview">
<img src="example-preview.jpg">
<p>圖片描述文字</p>
</div>
</div>

使用上面的代碼，將圖片和預(yù)覽區(qū)塊放入 ".hover-img" 元素中，懸浮鼠標時就可以顯示圖片預(yù)覽和描述文字，實現(xiàn)比較簡單、實用的效果。