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?

Answer 1

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.