Portfolio-Grid: Ein Foto-Magnet Menü in Webflow bauen

https://webflow-lernen.webflow.io/image-hover-mouse-movement-effect

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

Im Webflow Designer öffnen und klonen

https://webflow.grsm.io/Text-Grid-with-Magnetic-Images-on-Hover

Affiliate Link

In diesem Webflow Tutorial bauen wir zusammen ein Foto-Magnet Text Menü. Ein Bild wird zuerst mit einem Hover-Effekt eingeblendet und verfolgt dann den Mauszeiger.
Dieser moderne Ansatz wird auch häufig als Projekt-Übersicht auf einer Portfolio Startseite verwendet.‍

Passend dazu gehts hier zu meiner Portfolio Challenge auf Patreon:
‍https://www.patreon.com/posts/50987059‍

Kapitel:

00:00 - Intro
01:28 - Aufbau & Struktur
03:17 - Wichtige Einstellungen Bild & Maske
05:47 - Tracking Mouse Movement einrichten
07:46 - Bild Hover Animation anlegen
16:45 - Ergebnis
17:03 - Outro