要在鼠標放在圖片上時出現文字效果，你可以使用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>

這樣，當鼠標懸停在圖片上時，文本覆蓋將以淡入的方式出現。你可以根據需要調整樣式和效果。

請注意，上述示例僅為一種實現方法，你可以根據自己的需求進行修改和擴展。