I came across a mouseover effect on a website that I would like to learn as a "CSS animation beginner". It's about a background image/video which seems to hide behind another static BG image. You only ever see a section of the hidden image at the point where the mouse is currently located.
https://www.whiteoutworks.com on this website the effect is well visible.
I couldn't figure out the code of the page, but it seems to be done with CSS.
Can someone possibly explain to me in more detail how to implement this?
Thanks a lot and have a nice weekend!
:)
You can get inspired by this implementation and replace the source of the 'magnified' image with the 2nd image that you want to show.
/* Set background properties for the magnifier glass: */
glass.style.backgroundImage = "url('" + img.src + "')";
https://www.w3schools.com/howto/howto_js_image_magnifier_glass.asp