CODEWITHSUNDEEP
htmlcss
Jose Afonso
Jose Afonso

Reputation: 95

how to create an overlay effect with a color

I want to know how can I do a overlay but with a color in front. For example: 

.hover {
  opacity: 0.3;
  filter: alpha(opacity=30);
}

.hover:hover {
  opacity: 1;
  filter: alpha(opacity=100);
}
<div class="col-sm-4  hover ">
  <img src="https://placehold.it/250x250?text=IMAGEE" class="img-responsive " alt="Image">
</div>

it starts with some opacity, I want that opacity to be of red on top of the image. How can I achieve this?

Upvotes: 2

Views: 48

Answers (1)

Temani Afif
Temani Afif

Reputation: 272963

You can rely on pseudo-element to create this overlay and then easily change the background using rgba() to obtain any color with any opacity:

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

.hover img {
  vertical-align: top;
}

.hover:before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.3);
  transition: 0.5s;
}

.hover:hover::before {
  background: rgba(255, 0, 0, 1);
}
<div class="hover ">
  <img src="https://placehold.it/250x250?text=IMAGEE" class="img-responsive " alt="Image">
</div>

Upvotes: 4

Related Questions