在網站設計過程中，圖文并茂是必不可少的，使用CSS可以給圖片添加文本說明，這樣不僅可以讓頁面更加美觀，同時也可以增加網站的可讀性和用戶體驗。

/* CSS代碼 */
img {
position: relative;  /* 使圖片可移動 */
opacity: 1;  /* 設置圖片透明度 */
padding: 0;  /* 設置圖片內邊距為0 */
}
img:hover:before {
content: attr(alt);  /* 顯示圖片alt屬性的值 */
background-color: #333;  /* 背景顏色 */
color: #fff;  /* 文本顏色 */
font-size: 14px;  /* 文本大小 */
position: absolute;  /* 相對定位 */
top: -30px;  /* 距離圖片頂部30像素 */
left: -30px;  /* 距離圖片左邊30像素 */
padding: 10px;  /* 文本內邊距為10像素 */
border-radius: 10px;  /* 圓角 */
opacity: 0;  /* 隱藏 */
transition: all 0.4s ease;  /* 過渡效果 */
}
img:hover:before {
opacity: 1;  /* 顯示 */
}

上述代碼實現了鼠標懸停在圖片上時，顯示圖片的alt屬性值。可以根據需要自定義文本的樣式，比如改變字體大小、顏色、背景色等，并添加過渡效果。

最終效果如下：