html怎么实现当鼠标悬停在图片上时，图片放大，然后有超链接文字显示

可以使用CSS中的:hover伪类和transform属性来实现当鼠标悬停在图片上时，图片放大的效果。同时，可以在图片上添加超链接文字，使用position属性和z-index属性控制文字的位置和层级。

以下是一个示例代码：

HTML代码：

<a href="https://www.example.com">
  <div class="image-container">
    <img src="image.jpg">
    <div class="caption">超链接文字</div>
  </div>
</a>

CSS代码：

.image-container {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

img {
  display: block;
  transition: transform 0.3s ease;
}

.caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 16px;
  padding: 10px;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.image-container:hover img {
  transform: scale(1.1);
}

.image-container:hover .caption {
  opacity: 1;
}

解释：

- 首先，我们将一个超链接包裹在一个div容器中，容器设置为相对定位，用于后面绝对定位的文字。
- 图片设置为块级元素，并设置变换过渡效果。
- 文字使用绝对定位，位于图片下方，设置背景颜色、字体颜色、字体大小、内边距等样式，并设置初始不透明度为0，过渡效果为不透明度。
- 当鼠标悬停在图片容器上时，图片容器内的图片进行缩放变换，同时文字的不透明度从0变为1，达到放大图片并显示超链接文字的效果。