html - 链接内的图像在悬停时有颜色叠加

Question

我需要在链接内制作一个图像，它应该在悬停时有一个颜色叠加层，里面有一个位于死点的文本。但我不知道怎么办。我知道如何在图像上制作简单的颜色叠加层，但如何使用 a 内的 img 来实现这一点？

到目前为止，这是我的代码，如您所见，这不是我想要的。有人可以帮我解决这个问题吗？

.img-overlay img {
    position: relative;
  }
.overlay {
  display: none;
  position: absolute;
  color: #fff;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(41,42,44,0.5);
}
.img-overlay {
    position: relative;
}
.img-overlay:hover .overlay {
    display: block;
  }

<div class="img-overlay">
  <img src="https://placehold.it/350x150">
  <div class="overlay">
    <span>TITLE</span>
  </div>
</div>

我的图片需要放在 中，这样它才可以点击并指向某个地方。我怎样才能做到这一点？

Answer 1

我会制作容器 inline-block 使其适合图像的大小，将图像设置为 vertical-align: top 所以空白处底部消失了，然后使用 display: flex;对齐元素:居中； justify-content: center; 在覆盖容器上使其内容居中。

.img-overlay img {
  position: relative;
  vertical-align: top;
}

.overlay {
  display: none;
  position: absolute;
  color: #fff;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: rgba(41, 42, 44, 0.5);
  justify-content: center;
  align-items: center;
}

.img-overlay {
  position: relative;
  display: inline-block;
}

.img-overlay:hover .overlay {
  display: flex;
}

<a class="img-overlay">
  <img src="https://placehold.it/350x150">
  <div class="overlay">
    <span>TITLE</span>
  </div>
</a>

您还可以在 :hover 上切换 opacity，这样您就可以transition 更改。

.img-overlay img {
  position: relative;
  vertical-align: top;
}

.overlay {
  display: flex;
  position: absolute;
  color: #fff;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: rgba(41, 42, 44, 0.5);
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity .25s;
}

.img-overlay {
  position: relative;
  display: inline-block;
}

.img-overlay:hover .overlay {
  opacity: 1;
}

<a class="img-overlay">
  <img src="https://placehold.it/350x150">
  <div class="overlay">
    <span>TITLE</span>
  </div>
</a>