要在鼠標放在圖片上時出現文字效果，你可以使用CSS和HTML來實現。以下是一種常見的方法：
1. 首先，在HTML中插入一個包含圖片和文本的容器元素。
<div class="image-container"><img src="your-image-url" alt="Image">
<div class="text-overlay">
<p>Your text here</p>
</div>
</div>
在上述示例中，<div class="image-container">是包裹圖片和文本的容器。
2. 接下來，在CSS中設置容器元素和文本覆蓋的樣式。
.image-container { position: relative;
display: inline-block;
}
.text-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
color: #fff;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.image-container:hover .text-overlay {
opacity: 1;
}
在上述示例中，.image-container被設置為相對定位，并且.text-overlay被設置為絕對定位，覆蓋在圖片上方。當鼠標懸停在.image-container上時，我們將通過更改.text-overlay的透明度(opacity)來顯示或隱藏文本。
3. 最后，將CSS樣式與HTML元素相關聯。
<style>/* CSS代碼 */
</style>
<div class="image-container">
<img src="your-image-url" alt="Image">
<div class="text-overlay">
<p>Your text here</p>
</div>
</div>
這樣，當鼠標懸停在圖片上時，文本覆蓋將以淡入的方式出現。你可以根據需要調整樣式和效果。
請注意，上述示例僅為一種實現方法，你可以根據自己的需求進行修改和擴展。
