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?

For example in this fiddle: http://jsfiddle.net/qaXRp/

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

No. This is not possible, not in most browsers.

CSS Masking

You can use masking, if you are interested only in new browsers:
Specs: http://www.w3.org/TR/css-masking/
Compatibility: http://caniuse.com/css-masks

Border / Outline

You can also use border or outline css properties if you want to create simular effect and set color of them to transparent so it looks simular.

Position Absolute

You can also use position:

<div z-index:20></div>
<div z-index:10>
    <div z-index:30> // top div is over child of this one
</div>

Transparency and elements

http://css-tricks.com/non-transparent-elements-inside-transparent-elements/
http://css-tricks.com/examples/NonTransparentOverTransparent/
-- this is not what are you asking for, but it can helps you :)

Answer 2

This is possible, to a degree.

Option 1: Covering element with semi-transparent border

body, html{
    height:100%;
    width:100%;
    padding:0;
    margin:0;
    background:blue;
}
#overlay{
    height:100%;
    width:100%;
    position:fixed;
    border:50px solid rgba(255,255,255,.3);
    box-sizing:border-box;
    top:0;
    left:0;
}

<div id='overlay'></div>

content content content contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent

Option 2: 3x3 grid with the central element fully transparent

body,
html {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  position: fixed;
  background: blue;
}
#overlay {
  display: table;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.row {
  display: table-row;
}
.cell {
  display: table-cell;
  opacity: 0.9;
  background: grey;
}
.row:nth-child(2) .cell:nth-child(2) {
  opacity: 0;
}

<div id='overlay'>
  <div class='row'>
    <div class='cell'></div>
    <div class='cell'></div>
    <div class='cell'></div>
  </div>
  <div class='row'>
    <div class='cell'>&nbsp;</div>
    <div class='cell'>&nbsp;</div>
    <div class='cell'>&nbsp;</div>
  </div>
  <div class='row'>
    <div class='cell'></div>
    <div class='cell'></div>
    <div class='cell'></div>
  </div>
</div>

content content content contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent
contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent
contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent

Answer 3

You can now achieve this with relatively good support in new webkit browsers using css clipping (see here for compatability).

For example, the following code would cut a hole with a radius of 100px (so 200px wide) in the center of your element (with a slightly feathered edge).

-webkit-mask-image radial-gradient(100px at 50% 50% , transparent 95%, black 100%)

Here's a codepen to demonstrate.

Answer 4

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>

Answer 5

This is not possible. But anyways you can do the border trick: The #overlay itself is transparent but The borders are not. See the fiddle: http://jsfiddle.net/qaXRp/2/