html的网页设计鼠标悬停在图片时，图片上显示覆盖文字

可以通过在 HTML 中使用 CSS 来实现鼠标悬停在图片上时显示覆盖文字的效果。具体步骤如下：

1. 在 HTML 中添加图片和文字，例如：

<div class="image-container">
  <img src="yourImage.jpg" alt="Your Image" />
  <div class="overlay-text">
    Your Text
  </div>
</div>

2. 使用 CSS 将图片和文字进行定位，例如：

.image-container {
  position: relative;
}

.overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.image-container:hover .overlay-text {
  opacity: 1;
}

解释一下上面的代码：

- `position: relative;` 用于设置 `.image-container` 相对定位，以便后面的绝对定位可以相对于 `.image-container` 进行定位。
- `position: absolute;` 用于设置 `.overlay-text` 绝对定位，以便它可以相对于 `.image-container` 进行定位。
- `top: 50%; left: 50%; transform: translate(-50%, -50%);` 用于将 `.overlay-text` 定位到图片的中心位置。
- `opacity: 0; transition: opacity 0.3s ease-in-out;` 用于设置 `.overlay-text` 的初始透明度为 0，并且添加一个渐变效果。
- `.image-container:hover .overlay-text { opacity: 1; }` 用于设置当鼠标悬停在 `.image-container` 上时，`.overlay-text` 的透明度变为 1，从而显示出来。

通过这些步骤，就可以实现鼠标悬停在图片上时显示覆盖文字的效果。