How to apply a custom color as a transparent overlay for an image?

Question

I am trying to apply the hover effect shown above. I only need help with the gold transparent filter where I tried a 100% linear-gradient when the image is hovered but that does not work. I have also tried the filter property but cannot find a way to add a custom colour instead of using the presets.

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

You seem to be applying a background color to the figure but that will be hidden by the image. Apply the background color to the overlay i which you then make 100% wide and tall. Centering the content of the overlay is simple from there.

 .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

If I understand you correctly, you need to set a custom color for the gradient color on hover.

Why don't you add it as an inline style?

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

Or you could add the background-color as a class and apply a different style to each figure.

.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">