user3019653 user3019653 - 1 year ago 248
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:

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 Source

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

CSS Masking

You can use masking, if you are interested only in new browsers:

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

Transparency and elements
-- this is not what are you asking for, but it can helps you :)