0

I'm trying to overlay an image with a specific HSLA color i have, however every combination I have tried to achieve this effect has either gone over or under the space required of the image.

I have the image in a div as follows:

    <div class="container1 overlay">
            <img class="fleet" src="./images/hero-truck-lg.jpg" alt="Mountain View">
    </div>

And I've tried to overlay it with :before and :after pseudo selectors, as well as just setting the background color of the container1 and image, yet neither technique works. 

.overlay:after {
  content: '';
  position: absolute;
  top: 1;
  left: 0;
  background-color: hsla(211, 100%, 18%,.6);
  z-index: 2;
  width: 100%;
  height: 100%;
}

But this results in the overlay spanning well beyond the container1 div. Why does setting :after position absolute top: 1, left: 9, width/height: 100% expand beyond the set div and how can I get the hsla color to only cover the image inside the div?

Dog
  • 2,726
  • 7
  • 29
  • 66

0 Answers0