Question 42489 in Html Question posted in
Some basic documentation can be found here.

How to use an object as a mask in HTML/CSS/JS?

I’m tying to recreate the effect in the following screenshot:

Screenshot showcasing the desired effect

The purple circles (bubbles) will be moving around the screen and when the hover over the header, the are supposed to "reverse" the colors of the header under them, purple to white, white to black so that they are visible.

I think that in order to achieve this effect, the bubbles would need to act as a mask that is sitting between two layers of headers, one with "dark" other with "light" colors like this:

<dark header layer>
<bubbles>
<light header layer>

The dark header layer would have the lowest z-index and the light header the highest. Bubbles would than make it so, that only the part of light header in its frame is displayed. Any idea, similar problems etc. that would help me achieve this effect?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    As provided by @beerwin, this Codepen had a very similar effect. It works by using the CSS mask-image property, which is being passed a radial gradient as an argument instead of an image. Than later in JS we can make the gradient move by modifying its --x and --y variables


  2. 0

    Have a look at mix-blend-mode: difference;.

    These articles give you a sense of what it can do.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search