title: fullscreen overlay with css/jquery
body: <p>i'm trying to make a "huge" div that fills all the viewport with opacity 0.4 or whatever. The problem is how to do it. I tried making a div with all my page content inside and give it this properties:</p>
  
  <pre><code>.div{
    width:100%;
    height:100%;
    background:#000;
    opacity:0.5;
  }
  </code></pre>
  
  <p>since that didn't work, i tried to add z-index and put a high value but it didn't work either.
  any idea?
  i want to make something like this:</p>
  
  <p><img src="https://i.stack.imgur.com/xn2ze.jpg" alt="enter image description here"></p>