Ein Tabelle Hover Effekt mit Bild-Vorschau erstellen

Heute bauen wir zusammen einen Tabellen Hover Effekt in Webflow. Sobald der Cursor über eine Zeile in der Tabelle geht, kommt der Hintergrund zum Vorschein, der die Tabellenzeile aus der Mitte heraus füllt. Gleichzeitig wird zu jeder Zeile ein Bild sichtbar, welches auf einer fixen Position am Browserrand mit scrollt und sozusagen eine Vorschau von dem Inhalt liefern könnte. Du kannst hier genauso auch ein Background-Video einfügen.

Ich habe zusätzlich eine Zeile Custom Code hinzugefügt, damit der Effekt trotzdem stattfindet, auch wenn man mit der Maus über das Bild hovert und darunter eine Tabellenzeile ist. Das Bild wird sozusagen von der Maus ignoriert (pointer-events:none)

Gesehen auf dieser Seite: https://neodlx.io
Falls dich so ein Tabellen-Menü Hover Effekt interessiert, schau dir auch gerne dieses Video von mir an:

‍