CODEWITHSUNDEEP
htmlcssimagehover
seandaniel
seandaniel

Reputation: 151

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

enter image description here

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

Upvotes: 0

Views: 132

Answers (2)

Paulie_D
Paulie_D

Reputation: 115009

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

Upvotes: 1

Halnex
Halnex

Reputation: 4526

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

Upvotes: 0

Related Questions