Custom Mouse which hides Background

Hello, (12.8 KB)

I want a rectangle to replace my mouse when I move my mouse over the black background. The gray background should then appear in the rectangle. So the mouse rectangle is supposed to hide the black background. But only in the field of the mouse rectangle.
I hope you understand what I mean, does anyone have an idea how I can do that?

To be honest - no... :grinning: You mean: Moving the mouse over the black background makes the mouse pointer itself disappear? The black background is then replaced by a grey background? And this only happens if you move your mouse pointer over the small grey square?

No, when I move over the black background, my mouse should become a rectangle (mouse pointer can stay) and this rectangle hides the black rectangle, so you can see through the black background with the mouse

May be, this will help you: Circular Mask reveal between 2 images - otherwise, search the forum for 'masking'

1 Like

You can also look into (Hype) Mutation Observer to move the contained image or container on opposite amounts of the axis values of your mouse coordinates.

Mutation Observer:

Hype Mutation observer (cleans up after itself):

Example using native mutation observer

There is also a magnifier template that uses this but with a scale factor.


Hey @karalicious, do you consider this problem solved or are you still having trouble? I'm planning to launch the "Spotlight" template on February 2, 2021. It's a no-coding solution to the problem. (It uses "Drag" events instead of mouse over events, because that's how it can easily be done in Hype — and most mobile devices don't even have a mouse.)

UPDATE — The template is online. Free Hype Templates 🏗

1 Like