要在鼠标放在图片上时出现文字效果，你可以使用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>
这样，当鼠标悬停在图片上时，文本覆盖将以淡入的方式出现。你可以根据需要调整样式和效果。
请注意，上述示例仅为一种实现方法，你可以根据自己的需求进行修改和扩展。
