https://i.sstatic.net/eZBnd.png
I'm struggling to implement the hover effect shown above. I specifically need assistance with creating a gold transparent filter using a 100% linear gradient when hovering over the image, but my attempts have been unsuccessful so far. I've also experimented with the filter property, but I can't figure out how to use a custom color instead of the presets provided.
Here's the HTML code:
<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>
And here's the corresponding CSS code:
.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;
}