html怎样实现鼠标放在图片上出现文字效果

要实现鼠标放在图片上出现文字的效果，可使用HTML和CSS来实现。以下是一个简单的示例：
HTML代码：
```html

```
CSS代码：
```css
.container {
position: relative;
display: inline-block;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* 透明黑色背景 */
color: white;
opacity: 0; /* 默许不显示 */
transition: opacity 0.5s;
display: flex;
justify-content: center;
align-items: center;
}
.container:hover .overlay {
opacity: 1; /* 鼠标悬停时显示 */
}
h3 {
text-align: center;
}
```
在上述示例中，使用一个div容器包裹图片和一个用于显示文字的overlay div。利用CSS的position属性，将overlay div设置在容器的顶部，并使用透明黑色背景和白色文字来提供对照度。通过设置.opacity属性和过渡效果，实现了从不显示到显示的淡入效果。在容器元素上设置:hover伪类选择器，当鼠标悬停在容器上时，将.overlay元素的.opacity属性设置为1，使其显示出来。
请将"your_image.jpg"替换为您自己的图片路径，并通过CSS样式调剂容器和文字的样式以适应您的需求。