1

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!

:)

Romina Möller
  • 13
  • 3

1 Answers1

0

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

nOs
  • 24
  • 3