悬停时具有颜色叠加的链接中的图像

Question

我需要在链接内制作一个图像，它应该在悬停时有一个颜色叠加层，里面有一个位于死角的文本。但我不知道怎么做。我知道如何在图像上制作简单的颜色叠加，但是如何使用内部的 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; align-items: center; 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>