在前端開發中，瀑布流效果可以大大增強網頁的美觀度。同時，加入文字描述，可以更好地展示圖片的主題。本文將介紹如何使用CSS做一個瀑布加文字的效果。

.waterfall {
column-count: 3; /* 設置列數 */
column-gap: 20px; /* 設置列之間的間隔 */
}
.waterfall-item {
break-inside: avoid; /* 避免圖片被分割 */
margin-bottom: 20px; /* 圖片之間的間隔 */
}
.waterfall-text {
position: absolute; /* 將文字定位到圖片上 */
bottom: 0;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.5); /* 背景顏色半透明 */
color: #fff;
padding: 10px;
box-sizing: border-box;
opacity: 0; /* 默認透明 */
transition: opacity 0.3s; /* 漸變過渡效果 */
}
.waterfall-item:hover .waterfall-text {
/* 鼠標懸浮在圖片上時，文字透明度為1 */
opacity: 1;
}

首先，我們需要定義一個包含多個圖片的父容器，并設置它的列數和列間隔。然后，為每一個單獨的圖片添加一個子容器，并通過CSS的column-count屬性使得圖片自動布局。接著，在每個圖片子容器下面添加一個文字容器，將文字定位到圖片下方并設置透明度。

最后，通過:hover選擇器讓鼠標懸浮在每張圖片上時，文字容器的透明度漸變為1，實現瀑布流加文字的完美效果。