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

@Paulie_D This works BUT since I have the I positioned top: 30% and right: 30%, it moves the background square the same direction, not fully overlaying the image. — seandaniel
– seandaniel, Commented Jul 13, 2019 at 16:43

Paulie_D · Accepted Answer · 2019-07-13 16:32:21Z

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

Problem solved, I should have realized I could have use flex. Thanks.

Halnex · Accepted Answer · 2019-07-13 14:37:55Z

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

Yes, a custom color for the gradient color on hover. Inline styles are bad practice, I don't see how your second answer is any different from me not using a class and selecting the figure itself. Regardless, neither worked.

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Related