0

In the past when creating image overlays, I've used the property like this, as an example...

  .hero {
     position: relative;
     height: 400px;
     width: 100%;
     background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.25) 100%), url(https://picsum.photos/1200/400);
     background-position: center;
     background-size: cover;
    }

However, I have multiple pages now and I'm wanting to be able to keep an overlay on top of the image no matter which image file I'm using. If I use the background-image: linear-gradient property, it of course doesn't overlay since I'm not using the image as a background, rather as an object. Here's what I have so far, but the overlay isn't seeming to work right (or at all for that matter).

codepen

below is the snippet... I am using the z-index to try and "force" the overlay above the img property. Am I even on the right track? Thanks for your help

.hero {
  position: relative;
  height: 400px;
  width: 1200px;
}
.overlay {
  z-index: 2;
  background-color: rgba(0,0,0,0.5);
  height: 100%;
  width: 100%;
}
.overlay img {
  z-index 1;
  height: 100%;
  width: 100%;
}
<div class="hero">
  <div class="overlay">
    <img src="https://picsum.photos/1200/400" alt="">
  </div>
</div>
Jeremy
  • 1,038
  • 11
  • 34
  • `z-index:0` to hero and `z-index:-1` to img and `position:relative` to img and nothing on overlay (details of *why* in the duplicate) – Temani Afif Nov 06 '19 at 01:27
  • thank you, unfortunately the image still doesn't have any overlay on it. I updated the codepen: https://codepen.io/jeremylucas/pen/VwwXygq – Jeremy Nov 06 '19 at 01:32
  • missing `:` in the z-index of the image – Temani Afif Nov 06 '19 at 01:33
  • oh gosh lol not the first time. Thanks for your help, and for linking the other stack. I really appreciate it – Jeremy Nov 06 '19 at 01:34

0 Answers0