Adding transparent overlay to div

Question

I'm trying to add an overlay over a div which houses an image. I've seen approaches which add an overlay to background images, but can't seem to figure out why it doesn't work for divs?

Approach:

.featured-image {
  height: 338px;
  position: relative;
  overflow: hidden;
}

.overlay {
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
  z-index: 2;
}

<div class="featured-image">
  <div class="overlay">
    <img src="https://img.freepik.com/free-vector/abstract-low-poly-design-background_1048-8196.jpg?size=338c&ext=jpg">
  </div>
</div>

score 2 · Accepted Answer · answered Dec 17 '18 at 11:50

<style>
.featured-image {
  height: 338px;
  position: relative;
}

.overlay {
  position:absolute;
  top:0px;
  left:0px;
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
  z-index: 2;
}
</style>
<div class="featured-image">
  <div class="overlay"></div>
    <img src="https://img.freepik.com/free-vector/abstract-low-poly-design-background_1048-8196.jpg?size=338c&ext=jpg">
  
</div>

Adding transparent overlay to div

1 Answers1