如何将自定义颜色用作图像的透明叠加层？

Question

我正在尝试应用上面显示的hover效果。我只需要金色透明滤镜的帮助，当图像悬停时我尝试了100％linear-gradient，但那不起作用。我也尝试过filter属性，但是找不到一种添加自定义颜色的方法，而不是使用预设。

HTML

    <figure>
    <a href=#><img src="assets/instagram-1.jpeg" alt=""></a>
    <i class="fas fa-search"></i>
    </figure>
    <figure>
    <a href=#><img src="assets/instagram-2.jpeg" alt=""></a>
    <i class="fas fa-search"></i>
    </figure>
    <figure>
    <a href=#><img src="assets/instagram-3.jpeg" alt=""></a>
    <i class="fas fa-search"></i>
    </figure>
    <figure>
    <a href=#><img src="assets/instagram-4.jpeg" alt=""></a>
    <i class="fas fa-search"></i>
    </figure>
    <figure>
    <a href=#><img src="assets/instagram-5.jpeg" alt=""></a>
    <i class="fas fa-search"></i>
    </figure>
    <figure>
    <a href=#><img src="assets/instagram-6.jpeg" alt=""></a>
    <i class="fas fa-search"></i>
    </figure>
  </div>

CSS

.footer-col-4 {
  width: 21.5rem;
  padding-left: 1.75rem;
}

.footer-col-4-images {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.footer-col-4-images figure:nth-child(-n+3) {
  margin-bottom: .75rem;
}

.footer-col-4-images figure {
  position: relative;
}

.footer-col-4-images i {
  color: #e4e4e4;
  position: absolute;
  top: 30%;
  right: 0;
  left: 40%;
  bottom: 0;
  font-size: 1.4rem;
  visibility: hidden;
}

.footer-col-4-images figure:hover {
  background: linear-gradient(90deg, rgba(238,176,19,0.5) 100%, rgba(238,176,19,0.5) 100%);
}

.footer-col-4-images figure:hover i{
  visibility: visible;
}

Answer 1

您似乎正在将背景色应用于figure，但是背景色将被图像隐藏。将背景颜色应用于叠加层i，然后将其设为100％宽高。从那里开始，使叠加层内容居中很简单。

.wrap {
  display: inline-block;
  position: relative;
}

i.fa {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
  color: white;
  background: linear-gradient(90deg, rgba(238, 176, 19, 0.5) 100%, rgba(238, 176, 19, 0.5) 100%);
  visibility: hidden;
}

figure:hover i {
  visibility: visible;
}

<figure class="wrap">
  <img src="http://www.placebacon.net/300/210?image=1" alt="">
  <i class="fa fa-search"></i>
</figure>

Codepen.io Demo

Answer 2

如果我对您的理解正确，则需要为悬停时的渐变颜色设置自定义颜色。

为什么不将其添加为嵌入式样式？

<figure style="background-color: linear-gradient(..)">
    <a href=#><img src="assets/instagram-1.jpeg" alt=""></a>
    <i class="fas fa-search"></i>
</figure>

或者您可以将background-color添加为类，并为每个图形应用不同的样式。

.footer-col-4-images figure.red:hover {
  background: linear-gradient(90deg, rgba(...) 100%, rgba(...) 100%);
}

.footer-col-4-images figure.blue:hover {
  background: linear-gradient(90deg, rgba(...) 100%, rgba(...) 100%);
}

<figure class="red">