CODEWITHSUNDEEP
jqueryhtmlcss
setheid
setheid

Reputation: 101

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

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');
    });
});

Upvotes: 8

Views: 1277

Answers (3)

setheid
setheid

Reputation: 101

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

Upvotes: 2

Rea
Rea

Reputation: 308

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

Upvotes: 2

Joaquín O
Joaquín O

Reputation: 1451

I don't think there is a way to do that with css

And I'm pretty sure there is not a cross-browser css solution for that..

I think that your best option could be <canvas> html element + js. I'm not into it, but it surely can be done..

Here is Mozilla MDN documentation for canvas.. https://developer.mozilla.org/en/docs/Web/HTML/Element/canvas

Upvotes: 0

Related Questions