在網頁設計中，有時候需要在圖片上添加一些文字描述，這時候就可以使用CSS中的圖片上懸浮文字效果來實現。下面就來介紹一下它的具體實現。

img{
position: relative;
}
img:hover::after{
content: "這是懸浮的文字描述";
position: absolute;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
color: white;
padding: 10px;
}

首先，我們需要設置圖片的定位為相對定位，這樣后面的絕對定位才有意義。

img{
position: relative;
}

接下來，我們使用:hover偽類選擇器來設置當鼠標懸浮在圖片上時被觸發的效果，然后使用::after偽元素來在圖片之后添加文字描述。

img:hover::after{
content: "這是懸浮的文字描述";
position: absolute;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
color: white;
padding: 10px;
}

在上述代碼中，我們可以看到content屬性用來設置顯示的文字內容。我們在鼠標懸浮在圖片上時，會在圖片之后生成一個偽元素，這是因為我們將它的位置使用絕對定位來設置的。我們還對這個偽元素的樣式進行了一些設置，包括背景顏色、文字顏色、內邊距等。

最后，我們再來看一下完整的CSS圖片上懸浮文字效果代碼：

img{
position: relative;
}
img:hover::after{
content: "這是懸浮的文字描述";
position: absolute;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
color: white;
padding: 10px;
}

使用CSS圖片上懸浮文字效果可為網頁設計增加一些趣味性，同時也可以更好地為用戶服務。