Selective transparency for overlapping text elements

[benf]

I have been looking for a way to implement something of a dynamically positioned div that would cause the upper layer of text to become transparent allowing a hidden under layer to become visible. This is also somewhat like knockout text, except the knockout would be circle or other arbitrary-shaped div.

I have been able to somewhat accomplish this using background-blend-mode screen, but only if the upper element has a white background.

I’m not sure how to describe what I’m thinking of, so apologies if this if this has been discussed or explained before. I couldn’t find it.

Another way to think about it is that it’s like x-ray vision to see through the top layer into the guts beneath. The see-through portion I envision tracking mouse movement using a JS listener to position a div.

Here is a very rough idea, but without any text. In this example you can see that any color other than white for the upper element creates problems.

Many thanks!

http://codepen.io/numbergames/pen/yMOPrd?editors=1100

[benf]

Wanted to rephrase my question since it ran a little long. Here’s gist:

How to make a portion of a div transparent, ideally by using another overlay element that makes the upper layer transparent, showing through content beneath?

Any help at all is appreciated!

[Author]

Posts