Joal Roberts Joal Roberts - 1 month ago 6
CSS Question

Full screen overlay for website (Figured it out!)

So I want an overlay (red) that covers the whole page, and is on top of everything. I also would like it to be possible to click through it, not effects the elements below it.

Answer

.overlay{
  position:absolute;
  background:#000;
  opacity:.3;
  left:0;
  right:0;
  top:0;
  bottom:0;
  z-index:1
}
<div class="overlay">

</div>
<div>
  You will be able to see the content. But cant click it
</div>

Make sure that .overlay is appended as direct child to the body tag