CSS圖片彈出文字是一種優雅而簡單的方式，可以在圖片上展示出標題或者其他重要的信息。該技術有助于提高頁面吸引力，使用戶對信息更加感興趣。

.img-container{
position: relative;
}
.img-container img{
width: 100%;
height: auto;
}
.img-container p{
position: absolute;
bottom: -30px;
width: 100%;
background-color: rgba(0,0,0,0.5);
color: #fff;
text-align: center;
padding: 10px;
font-size: 18px;
opacity: 0;
transition: opacity 0.5s;
}
.img-container:hover p{
opacity: 1;
}

代碼中的關鍵點是在.img-container中創建一個絕對定位的p標簽，然后將它放在圖片的底部。當用戶鼠標移動到圖片上時，使用:hover偽類選擇器將p標簽的不透明度設置為1，觸發CSS動畫效果，使圖片中的文本彈出。這樣可以使圖片上的任何重要內容都能輕松地呈現出來。

總的來說，CSS圖片彈出文字是一種很簡單但非常實用的技術。如果你在設計網站時希望增加視覺效果并強調相關信息，使用該技術可以讓你的網站更加生動和吸引人。