在網頁設計中，如何讓圖片翻轉后顯示出文字呢？這個需求可以通過CSS實現。

.flip {
perspective: 1000px;
}
.flip:hover .flip-card {
transform: rotateY(180deg);
}
.flip-card {
width: 200px;
height: 200px;
border: 1px solid #ccc;
perspective: inherit;
transition: transform .5s;
}
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card-front {
color: #000;
}
.flip-card-back {
transform: rotateY(180deg);
color: #fff;
}
.flip-card-back p {
margin: 0;
padding: 20px;
line-height: 1.5;
}

首先，需要將容器設置為.flip，并給它設置透視屬性perspective，以便具有 3D 效果。

接著，當鼠標懸停在容器上時，將翻轉卡片顯示出來。在卡片上設置過渡屬性transition，使翻轉效果更加平滑。

卡片的正面和背面可以分別設置為.flip-card-front和.flip-card-back，并將它們的位置設為絕對定位，大小設為 100%。同時，使用backface-visibility屬性來隱藏背面，使其不被正面遮擋。

背面的文字可以放在一個p標簽中，并適當設置樣式。

這樣就完成了圖片翻轉顯示文字的效果。需要指出的是，這個效果使用了CSS 3D 屬性，低版本瀏覽器可能無法支持。