Hole in overlay with CSS

css overlay
user3019653 picture user3019653 · Nov 27, 2013 · Viewed 22k times · Source

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

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

chowey picture chowey · Jun 28, 2016

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>

Related questions

How to overlay one div over another div

I need assistance with overlaying one individual div over another individual div. My code looks like this: <div class="navi"></div> <div id="infoi"> <img src="info_icon2.png" height="20" width="32"/> </…

Read More
Change color of PNG image via CSS?

Given a transparent PNG displaying a simple shape in white, is it possible to somehow change the color of this through CSS? Some kind of overlay or what not?

Read More
Prevent body scrolling but allow overlay scrolling

I've been searching for a "lightbox" type solution that allows this but haven't found one yet (please, suggest if you know of any). The behavior I'm trying to recreate is just like what you'd see at Pinterest when clicking on …

Read More