css - 显示文本叠加并在悬停时应用图像透明度

Question

我试图在悬停时使图像半透明并显示文本，否则将设置为 display: none。目前，如果您将鼠标悬停在图像上，它会变为半透明(.single-image:hover 有效)，但文本不会出现。当文本未设置为 display: none 时，它位于左下角的图像上方。我以为既然是在图片上方，那么hover伪类就生效了。我还尝试将 .attribution 的 z-index 设置为 1，但这没有做任何事情。

<div className="image-container">
    <a href={image.links.html} target="_blank" rel="noopener noreferrer">
       <img className="single-image" src={image.urls.regular} alt="" />
       <p className="attribution">Unsplash</p>
    </a>
 </div>

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

    /* Text */
    .attribution {
      display: none;
      color: white;
      position: absolute;
      bottom: 20px;
      left: 20px;
    }

    .attribution:hover {
      display: block;
    }

    .single-image {
      margin: 7px;
      height: 350px;
      width: 350px;
      object-fit: cover;
    }

    .single-image:hover {
      opacity: 0.7;
      transition: 0.5s;
    }

Answer 1

您应该将 hover 功能移动到父 div。

将 .attribution:hover 更改为 .image-container:hover .attribution 并将 .single-image:hover 更改为 。 image-container:hover .single-image.

奇怪的是，为了让它工作，您还需要向父 div 添加边框或背景颜色。 (Here 是为什么)

我添加了透明色 background-color: rgba(0, 0, 0, 0);。

.image-container {
  display: inline-block;
  position: relative;
  background-color: rgba(0, 0, 0, 0);
}

/* Text */
.attribution {
  display: none;
  color: white;
  position: absolute;
  bottom: 20px;
  left: 20px;
}

.image-container:hover .attribution {
  display: block;
}

.single-image {
  margin: 7px;
  height: 350px;
  width: 350px;
  object-fit: cover;
}

.image-container:hover .single-image {
  opacity: 0.7;
  transition: 0.5s;
}

<div class="image-container">
    <a href="#" target="_blank" rel="noopener noreferrer">
       <img class="single-image" src="https://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg" alt="" />
       <p class="attribution">Kitten!</p>
    </a>
 </div>