web鼠标指针悬停图片，背部文字反转

这个效果可以通过CSS实现。你可以使用:hover伪类选择器来控制鼠标悬停时的样式，使用transform属性来反转文字。

以下是一个示例代码：

HTML:

<div class="image-wrapper">
  <img src="your-image-url" alt="your-image-alt">
  <div class="text-wrapper">
    <p>Your text here</p>
  </div>
</div>

CSS:

.image-wrapper {
  position: relative;
  display: inline-block;
}

.text-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.image-wrapper:hover .text-wrapper {
  opacity: 1;
}

.text-wrapper p {
  transform: rotateY(180deg);
  /* 其他样式 */
}

解释：

- .image-wrapper元素包含图片和文字。它的position属性设置为relative，以便在同一位置放置图片和文字。
- .text-wrapper元素是绝对定位的，它的宽度和高度都设置为100%，使其与父元素相同大小。背景颜色设置为半透明黑色，以便反转后的文字更加清晰可见。opacity属性设置为0，使其默认情况下不可见。使用CSS过渡（transition）属性可以使其在鼠标悬停时平滑地显示/隐藏。
- 通过:hover伪类选择器，当鼠标悬停在.image-wrapper元素上时，.text-wrapper元素的opacity属性设置为1，使其可见。
- .text-wrapper p元素的transform属性使用rotateY(180deg)来反转文字，使其背面朝上。你可以根据需要调整样式属性。

希望这可以帮到你！