Bild Guckloch Effekt: CSS Maskierung in Webflow nutzen

https://webflow-lernen.webflow.io/peephole-image-mask-effect-in-webflow

https://preview.webflow.com/preview/webflow-lernen?utm_medium=preview_link&utm_source=designer&utm_content=webflow-lernen&preview=25ac349dc1edd443449a3691e0fb6d60&pageId=609ecc8b79a0650bb387960c&workflow=preview

Im Webflow Designer öffnen und klonen

Affiliate Link

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. Der Kreis bewegt sich on Mouse Movement – verfolgt also magnetisch den Mauszeiger.

Da man in Webflow Animation keine Position top / left oder CSS Masken beeinflussen kann, muss ein wenig custom Code hinzugefügt werden. Dafür habe ich folgenden externen Code verwendet: https://stackoverflow.com/questions/63227926/move-clip-path-position-to-mouse-cursor.

‍

Ein weiterer nützlicher Artikel von CSS-Tricks zum Thema Mask-Position hat mir geholfen das ganze zu verstehen:
‍‍https://css-tricks.com/almanac/properties/m/mask-position

‍

Der Effekt ist ähnlich wie auf der Seite von Vanmoof:
https://www.vanmoof.com/de-DE/s3?color=dark oder auf https://www.canoo.com/canoo

‍