CSS技術可以讓網頁更加具有交互性和可讀性。其中一種技術是在圖片上設置文字提示，當鼠標移動到圖片上時，文字出現在圖片旁邊，以提示用戶與此圖片相關的信息。在CSS中，你可以使用:before偽元素來創建這種效果。

.img:hover:before {
content: attr(alt);
position: absolute;
background-color: #333;
color: #fff;
padding: 10px;
border-radius: 5px;
top: 100%;
left:50%;
transform: translateX(-50%);
z-index: 2;
}

在這段代碼中，.img的:hover狀態表示當鼠標懸浮在圖片上時，將應用這個樣式。在:before偽元素中使用content 屬性設置圖片的alt屬性，這意味著在鼠標懸浮時將顯示對應的文字。position: absolute; 表示文字提示將絕對定位于圖片旁邊，并且使用padding屬性增加文字的可讀性。border-radius屬性可以使提示框更加美觀。使用top和left屬性來將文字提示定位在圖片下方，并使文字提示始終居中。z-index屬性用于控制文字提示的層級，以防止提示框被其他元素遮蓋。 盡管這種技術適用于所有網站的圖片，但特別適合于電商或圖片分享網站，以便用戶更好地了解圖片及其信息。