Animazione hover con immagini impilate in Webflow

Puoi costruire in Webflow un’animazione hover dinamica con immagini che si impilano — di quelle che vedi sui siti d’agenzia premiati — quasi interamente con le interazioni native, più una dozzina di righe di JavaScript per l’unica cosa che Webflow non sa fare da solo. Passi il mouse su una riga della lista e un’immagine di anteprima scala in un angolo; scendi lungo la lista e ogni nuova immagine si impila sopra la precedente, mentre il testo della riga scorre per rivelare una variante in bianco su nero sotto di sé.

Sembra sofisticato, e lo è — ma in fondo è una pila di piccole decisioni oneste. Una collezione CMS così che tutto sia guidato dai contenuti. Un layout astuto a tre wrapper così che il reveal del testo si legga correttamente da qualunque direzione arrivi il cursore. E un piccolo script che prende in prestito la stessa interazione click di Webflow per simulare qualcosa che non ha un equivalente nativo.

Vale la pena seguire il build dall’inizio alla fine, perché la parte interessante non è nessun singolo passaggio — è perché la versione ingenua fallisce e cosa risolve davvero ogni correzione.

Come funziona

Prima i contenuti. La lista è una collezione CMS (“recognitions and awards”) con qualche campo — una categoria di premio, il tipo di riconoscimento, un po’ di testo per la CTA del link e una thumbnail del progetto. Costruirla guidata dal CMS mantiene il layout flessibile: stili un solo collection item e ogni riga lo eredita.

Il problema della direzione. Il reveal deve sembrare giusto sia che entri nella riga dall’alto sia dal basso. Ma l’interazione hover di Webflow non ti dice quale bordo ha attraversato il cursore — una singola animazione hover scorrerebbe sempre nello stesso verso. Qui si combinano due correzioni. Primo, il testo è costruito come tre wrapper impilati (bianco, nero, bianco) dentro una riga alta esattamente un wrapper con overflow: hidden, così ne resta visibile uno solo e c’è sempre un vicino nascosto pronto a entrare. Secondo, la riga è divisa in due div trigger a metà altezza, in posizione assoluta — uno in alto e uno in basso — ognuno con la propria interazione hover. Ora “entrare dall’alto” ed “entrare dal basso” sono eventi davvero diversi, e ciascuno lancia lo scorrimento corretto.

Il problema dell’immagine. Una riga con overflow: hidden ritaglierebbe la propria thumbnail, quindi ogni immagine viene impostata su position: fixed — che la solleva dal contesto della riga e la ancora all’angolo del viewport — con pointer-events: none così non blocca mai le righe sottostanti. Le interazioni native possono scalare un’immagine da 0 a 1 in hover, e onestamente potresti fermarti qui e pubblicare un ottimo risultato. Ma il riferimento fa due cose che Webflow non può: impila una nuova immagine sopra ogni volta (a prescindere dall’ordine nel DOM, così le righe successive non vincono sempre lo z-index) e alterna tra due immagini per riga.

Dove il codice si guadagna il pane. L’espediente è elegante. L’interazione click di Webflow lancia un’animazione diversa al primo click rispetto al secondo — un toggle a due stati gratuito. Quindi colleghi due immagini e due animazioni al click, poi lasci che un breve script traduca ogni hover in un click e alzi lo z-index dell’immagine mostrata. Webflow continua a eseguire tutta l’animazione; il JavaScript fa solo il conteggio e l’impilamento per cui non ha un aggancio nativo.

Come si usa

1. Crea la collezione CMS. Aggiungi una collezione (es. Recognitions & Awards) con un campo opzione per la categoria del premio, un campo opzione per il riconoscimento (nominee / awarded), un campo testo semplice per il testo della CTA del link e un campo immagine per la thumbnail del progetto. Genera qualche item di esempio su cui lavorare.

2. Imposta la riga. Aggiungi una collection list dentro il wrapper della sezione e collegala alla collezione. Sul collection item, imposta un display type in grassetto (il tutorial usa font-size: 5.5vw, line-height: 1, tutto maiuscolo) e position: relative — servirà da riferimento per i figli in posizione assoluta più avanti. Dentro, aggiungi un link block impostato su display: block e una proprietà custom color: inherit per eliminare il blu di default dei link.

3. Costruisci i tre wrapper di testo. Dentro il link block, aggiungi un wrapper di testo con 1vw di padding su tutti i lati e display: flex / justify-content: space-between che contiene due elementi di testo (categoria + riconoscimento). Duplicalo due volte; alla copia centrale dai una combo class con testo bianco su sfondo nero. Questo ordine impilato bianco / nero / bianco è ciò che fa funzionare il reveal in entrambe le direzioni.

4. Ritaglia la riga a una sola riga di testo. Calcola l’altezza di un wrapper (padding sopra + sotto + altezza del testo — qui 1 + 1 + 5.5 = 7.5vw), impostala come altezza fissa dell’item e metti overflow: hidden. Ora si vede un solo wrapper e gli altri restano ritagliati fuori dalla vista.

5. Aggiungi l’immagine di anteprima fissa. Metti un’immagine dentro il link block, collegala al campo thumbnail e impostala su position: fixed, ancorata in basso a destra con offset di 1vw, width: 30vw, un aspect ratio landscape, object-fit: cover, pointer-events: none e uno z-index alto (es. 1000).

6. Dividi la riga in due trigger. Aggiungi due div block in posizione assoluta dentro il link block, ognuno height: 50%, uno ancorato alla metà superiore e uno a quella inferiore. Sono i tuoi target hover consapevoli della direzione.

7. Collega l’animazione del testo consapevole della direzione. Sul trigger superiore, aggiungi un’interazione Mouse-hover. In hover, sposta il primo wrapper di testo da -200% (stato iniziale) a -100% sull’asse Y, 0.7s, ease-out-quart; in hover-out, portalo a -200%. Riusa la stessa animazione “trigger on hover” per il trigger inferiore e dai al trigger inferiore un suo hover-out che riporta il wrapper a 0% — il movimento opposto. È il comportamento a quattro direzioni, ottenuto con una sola animazione condivisa e due varianti di hover-out.

8. Scala l’immagine in hover. Aggiungi al collection item un’interazione hover che scala l’immagine collegata da 0 a 1 (0.7s, ease-out-quart) in hover, e di nuovo a 0 in hover-out. A questo punto hai una versione completamente no-code che già rende benissimo.

9. Prepara due immagini e un trigger nascosto (per la versione JS). Per impilare e alternare le immagini, duplica l’immagine e dai alle due copie combo class distinte. Aggiungi un piccolo div di 1px in posizione assoluta (il “trigger delle immagini”) e costruisci su di esso un’interazione click: il primo click scala in la prima immagine (con prima una action di reset a durata zero), il secondo click scala in la seconda immagine. Etichetta il collection item e questo trigger con attributi custom (il tutorial usa fc-award-hover="item" e fc-award-hover="trigger-one") così lo script può trovarli.

10. Aggiungi il piccolo script. In Impostazioni pagina → Prima di </body>, uno script di ~12 righe raccoglie ogni item tramite il suo attributo, tiene un contatore di z-index crescente e, a ogni mouseenter dell’item, clicca via codice il trigger nascosto (lanciando l’animazione al click già definita in Webflow) e alza lo z-index dell’immagine appena mostrata così si impila sopra le altre, alternando tra le due immagini per riga. Il codice esatto non è riportato qui — prendilo dal cloneable così i nomi degli attributi e la logica combaciano con il tuo setup. Facoltativo: aggiungi un’interazione list-on-hover-out sulla collection list che riscala le immagini a 0 quando il cursore lascia l’intera lista.