CODEWITHSUNDEEP
csssass
FakeEmpire
FakeEmpire

Reputation: 798

Overlaying clear background color on hover (sass)

I have a div with a background image. I want to be able to set a black transparent overlay on hover. How can I achieve this?

This is what I have so far

div {
  background: url('map-tracks.png');
  background-size: cover;
  transition: background-color 1s;
  &:hover {
    background-color: rgba(0, 0, 0, 0.5);
  }
}

Upvotes: 1

Views: 876

Answers (2)

Steven B.
Steven B.

Reputation: 9372

Assuming you actually want to see the background image still, use a pseudo element.

div {
  background: url('http://via.placeholder.com/200x200');
  background-size: cover;
  transition: background-color 1s;
  width: 200px; 
  height: 200px;

}

div:hover:after
{
    background: rgba(0, 0, 0, 0.50);
    content: '';
    position: absolute;
    width: 200px;
    height: 200px;
}
<div></div>

Upvotes: 4

Alex Alvarez G&#225;rciga
Alex Alvarez G&#225;rciga

Reputation: 464

Put an overlay (a div or something else) with absolute or relative positioning and with the proper black-semi transparent styling. Anyway you need another object for the overlay.

Upvotes: 0

Related Questions