在悬停时具有颜色覆盖的链接内的图像

Question

我需要在链接中创建一个图像，它应该在悬停时有一个颜色叠加，其中的文本位于死点中。但我不知道怎么做。我知道如何在图像上进行简单的颜色叠加，但是如何在一个？

中使用img来做到这一点

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

＆＃13;

＆＃13;

.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;
  }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我的图片需要在a里面，以便它可以点击并导致某个地方。我怎样才能做到这一点？

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>

您也可以在opacity上切换:hover，以便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>