How to mask out a section of a div to see behind it?

Question

I'm looking for a way to mask out part of a div so that what is behind is visible.

Looking at my example, I would like to replace the black circle with some sort of mask, so that as it slides down the text being revealed (or the background image) can be seen behind it.

jsfiddle

jQuery(document).ready(function() {
    $('.img').click(function() {
        $('.mid').slideToggle('slow');
    });
});

Answer 1

If you want to use only CSS, there is a really creative solution to your problem. You seperate the horizontal part where the "black hole" is from the others into three parts: left of the circular hole, the hole, and the right part. In the hole part you actually put a div with no background and a border with suitable border radius. As you already fixed all the width and height measurements, this further seperation should be no trouble.

Best example for how to is the whale : http://www.subcide.com/experiments/fail-whale/

This will be applicable for chomre 4.0+, IE 9+, Firefox 3+, Safari 3.1 and 5 as well as Opera 10.5 Make sure to also include the corresponding prefixes (-moz- and -webkit-)

Answer 2

Here's what I came up with this afternoon using:

background: radial-gradient(ellipse 200px 200px at 50% -25px, transparent 50px, green 0);

Looks like it works on all current browser versions too (I've only tested chrome and safari).

jsfiddle