Peephole

CSS Image Mask Effekt

Ich war auf der Suche nach einer Lösung, um einen Kreis als Guckloch über ein Bild bewegen zu lassen, so dass das drunterliegende Bild sichtbar wird.

Ähnlich wie auf der Seite von Vanmoof:
https://www.vanmoof.com/de-DE/s3?color=dark

Der Kreis bewegt sich über das Bild on Mouse Movement. Verfolgt also magnetisch den Mauszeiger. Da man in Webflow Animation keine Position top / left oder margin verändern kann, muss ein wenig custom Code hinzugefügt werden. habe ich folgenden externen Code eingesetzt, den ich hier gefunden habe:
https://stackoverflow.com/questions/63227926/move-clip-path-position-to-mouse-cursor.

Ein weiterer nützlicher Artikel von CSS-Tricks zum Thema mask-position:
https://css-tricks.com/almanac/properties/m/mask-position