user3019653 user3019653 - 5 months ago 108
CSS Question

Hole in overlay with CSS

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

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 :)