Portfolio-Grid: Ein Foto-Magnet Menü in Webflow bauen
Fortgeschritten 👍
Ergebnis anschauen
https://webflow-lernen.webflow.io/image-hover-mouse-movement-effect
Im Webflow Designer öffnen und klonen
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