Hole in overlay with CSS

Question

How is it possible to create a hole in an overlay where you can see through to the actual website?

#underground {   background-color: #725;   position: absolute;   top: 0;   left: 0;   bottom: 0;   right: 0; }  #overlay {   position: absolute;   top: 0;   left: 0;   bottom: 0;   right: 0;   overflow: hidden; }  #overlay #center {   width: 400px;   height: 200px;   background-color: #ABD;   position: absolute;   top: 50%;   left: 50%;   margin-top: -100px;   margin-left: -200px;   border-width: 100%;   border-color: #FFF;   border-style: solid; }

<div id="underground"></div> <div id="overlay">   <div id="center"></div> </div>

I want the <div id="center"> to be transparent so that you can see the <div id="underground">. Is it possible to do this only with CSS or do I have to use some JavaScript?

Answer 1

Yes, this effect is possible.

I would use the css box-shadow with a very large spread radius.

box-shadow: 0 0 0 9999px rgba(0, 0, 255, 0.2); 

.hole {    position: absolute;    top: 20px;    left: 20px;    width: 200px;    height: 150px;    box-shadow: 0 0 0 9999px rgba(0, 0, 255, 0.2);  }

<p>Lorem ipsum dolor sit amet, ocurreret tincidunt philosophia in sea, at pro postea ullamcorper. Mea ei aeque feugiat, cum ut utinam conceptam, in pro partem veritus molestiae. Omnis efficiantur an eum, te mel quot perpetua. Ad duo autem dolore, vocent lucilius te cum, ut duo quem singulis.</p>  <p>Has ex idque repudiandae, an mei munere philosophia. Sale molestie id eos, eam ne blandit adipisci. Ei eam ipsum dissentiunt. Ei vel accusam dolores efficiantur.</p>    <div class="hole"></div>