Searching for a specific background clip/mask property
Hi, I've been searching for a specific property that would allow me to reveal a background behind some elements. Here's the tricky part, I have several divs that are following the user's mouse and are created/deleted dynamically (for an animation) I would like to be able to reveal a background hidden behind those divs (similar to a flashlight I suppose). I searched a bunch and stumbled upon masks which would be great except I have a pattern for a full screen background and as far as I understand masks need to be put on the parent (in this case the small divs which would ruin the background or force me to repeat the background inside those divs instead. If any of you know of a property that would help me with that it would be greatly appreciated. Many thanks!
TLDR. I would like to reveal a background behind the "circles". Video of what the effect looks like for reference: https://www.youtube.com/shorts/VTw2cUVFl1c
Hyperplexed
YouTube
Interactive Liquid Effect - Vanilla JS
Watch as I show you how to create a sweet interactive liquid effect using just divs!
Support the channel: https://ko-fi.com/hyperplexed (accepts PayPal, card, etc).
CodePen: https://cdpn.io/abYjPXx
Tools used: HTML, CSS, JavaScript
Music Credits:
When I Was Younger - StreamBeats - Lofi - Harris Heller
Moderna Warfare - StreamBeats - EDM - H...
4 Replies
you can use
::before or ::After
those pseudo-elements support clip-masks, and you can control the hovering by targetting the parent elementexpanding on ἔρως something like this
https://codepen.io/MarkBoots/pen/VwOXzEr
Thanks will try these alternatives next week