悬停图像时图像文本会改变颜色

Question

我有一张图片和一些文字。我想要的是当悬停图像时，图像将具有不透明度并且文本颜色会发生变化。我的问题是当图像不透明时，文本也不透明，所以我似乎看不到文本。我该如何解决这个问题？ 注意：由于一些问题，我在这种情况下使用图像而不是背景图像，所以请帮我用图像解决这个问题。非常感谢！

这张图正是我想要的：

这是我的代码

.categories {
  height: 450px;
  position: relative;
  width: 256px;
  cursor: pointer;
  color: white;
}

.categories:hover {
  opacity: 35%;
  color: black;
}

.categories__text {
  font-size: 2.5rem;
  position: absolute;
  bottom: 1%;
  left: 20%;
  width: 50%;
  line-height: 50px;
}

<div class="categories">
  <div class="categories__child">
    <img alt="img" src="https://www.petcity.vn/media/news/923_gia_mua_ban_cho_phoc_soc_thukieng_12.jpg" />
  </div>
  <div class="categories__text">HERE IS THE TEXT</div>
</div>

Answer 1

您必须将图片和文字样式分开：

.categories {
  height: 450px;
  position: relative;
  width: 256px;
  cursor: pointer;
  color: white;
}

.categories:hover {
  color: black;
}

.categories:hover img {
  opacity: 35%;
}

.categories__text {
  font-size: 2.5rem;
  position: absolute;
  bottom: 1%;
  left: 20%;
  width: 50%;
  line-height: 50px;
}

<div class="categories">
  <div class="categories__child">
    <img alt="img" src="https://www.petcity.vn/media/news/923_gia_mua_ban_cho_phoc_soc_thukieng_12.jpg" />
  </div>
  <div class="categories__text">HERE IS THE TEXT</div>
</div>

悬停图像时图像文本会改变颜色

Image-text change color when hover an image

html

css

image

hover