利用css中的hover做个图片遮罩效果的文字描述

利用CSS中的`:hover`伪类可以创建一个图片遮罩效果，当鼠标悬停在图片上时，通常会显示一段文字或者改变图片的一部分样式。具体步骤如下：

1. 首先，你需要有一个包含图片和文本的HTML结构，例如 `<a>` 标签包裹着图片 (`<img>`) 和需要显示的文本 (`<span>` 或 `<p>`)。

<a href="#" class="mask-effect">
  <img src="your-image.jpg" alt="Your Image">
  <span class="mask-text">悬停时显示的文字</span>
</a>

2. 然后，在CSS中，你可以为`.mask-effect` 类设置样式，并为`:hover`状态添加特定的样式。当你将鼠标放在图片上时，`.mask-text` 将显示出来，而图片可能会变模糊或者透明度降低，形成一个“遮罩”效果。

.mask-effect {
  position: relative;
  overflow: hidden; /* 防止默认的链接外部滚动 */
}

.mask-effect img {
  transition: opacity 0.3s ease-in-out; /* 添加过渡效果，让遮罩更平滑 */
}

.mask-effect:hover img {
  opacity: 0.5; /* 图片变为半透明 */
}

.mask-effect .mask-text {
  display: none; /* 默认隐藏文字 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  /* 根据需要调整文字样式 */
}

.mask-effect:hover .mask-text {
  display: block; /* 当鼠标悬停时，显示文字 */
}