Un hover da avanzato in Webflow (solo CSS)

Alla fine di questa lezione avrai costruito un’interazione hover che sembra richiedere un’intera timeline di Interactions — passi su una card e il bordo si scurisce, l’immagine scala restando perfettamente clippata e ogni altra card sfuma verso il bianco e nero — senza usare nessuna Webflow Interaction. Solo style panel, hover state, qualche variabile e un pizzico di CSS.

È proprio questo il punto. È un effetto figo, certo, ma è anche una piccola lezione su come poche righe di CSS moderno possano rendere i tuoi progetti Webflow più potenti, flessibili e intenzionali che trascinare fuori un’interazione per ogni cosa.

Il punto di partenza è una normale griglia CMS di card blog. Due dettagli strutturali contano da subito: il card link ha overflow: hidden con un border-radius (così l’immagine scalata resta clippata), e i pezzi che animeranno — colore del bordo, transform dell’immagine e filter — hanno già delle transizioni (800ms, ease-out expo) così tutto si muove in modo coerente.

Come funziona

Il bordo è la parte facile e l’unica cosa che l’hover state nativo sa fare. Seleziona il card link, passa al suo hover state e imposta il colore del bordo su un valore del tuo gruppo variabili. Fatto — si anima all’hover con la transizione già definita.

L’inghippo arriva con l’immagine: l’hover state di Webflow dà stile solo all’elemento selezionato — non può raggiungere un figlio. Quindi per scalare l’immagine dentro la card su cui sei, serve un po’ di CSS custom. Il modo pulito per agganciarlo è un attributo custom, non una classe. Il card link riceve un attributo come card-link-hover, che stacca il comportamento dal nome della classe — qualsiasi elemento con quell’attributo ottiene l’interazione, anche se ha una classe diversa. Così l’interazione diventa un comportamento riutilizzabile invece di uno stile one-off.

Con l’attributo a posto, una regola scala l’immagine:

[card-link-hover]:hover img {
  transform: scale(var(--card-on-hover--image-scale));
}

In parole povere: quando un elemento con card-link-hover è in hover, scala l’img al suo interno. Il valore viene da una variabile di Webflow — e non traduci il nome a mano, usi Copy CSS sulla variabile e lo incolli dentro scale().

Il pezzo più soddisfacente — desaturare ogni card tranne quella su cui sei — è anch’esso solo tre righe, grazie al moderno selettore :has():

body:has([card-link-hover]:hover) [card-link-hover]:not(:hover) {
  filter: saturate(var(--card-on-hover--saturation));
}

Leggilo a pezzi: body:has([card-link-hover]:hover) significa “solo quando la pagina contiene una card in hover”, e [card-link-hover]:not(:hover) significa “punta a ogni card tranne quella su cui sei”. Insieme: quando una card è in hover, desatura tutte le altre. Invece di costruire un sistema di interazioni, descrivi la relazione in modo diretto — se questo esiste ed è in hover, dai stile a tutti gli altri. È questo che rende il CSS moderno così espressivo qui.

Come si usa

1. Prepara la struttura — dai al card link overflow: hidden più un border-radius così l’immagine resta clippata, e aggiungi transizioni su border-color, filter e il transform dell’immagine (es. 800ms, ease-out expo).
2. Salva i valori come variabili — un piccolo gruppo (qui “card on hover”) con la saturazione dei sibling, il fattore di scala dell’immagine e il colore del bordo all’hover.
3. Anima il bordo — seleziona il card link, passa al suo hover state e imposta il colore del bordo sulla tua variabile. Questa è del tutto nativa.
4. Aggiungi l’attributo — dai al card link un attributo custom come card-link-hover così l’interazione punta a un comportamento, non a una classe.
5. Aggiungi un embed per il CSS — metti un elemento Embed (classe global-styles) vicino alla cima della pagina e aprilo per aggiungere un blocco <style>.
6. Scala l’immagine — incolla la regola [card-link-hover]:hover img { transform: scale(...) }, usando Copy CSS per prendere il nome esatto della variabile.
7. Desatura i sibling — aggiungi la regola body:has(...) con filter: saturate(...), di nuovo incollando la variabile via Copy CSS. Salva e testa direttamente nel Designer.

Ecco un’interazione per card pulita e riutilizzabile con quasi zero codice — e un buon primo assaggio di quanto lontano possano portarti poche righe di CSS nei tuoi progetti Webflow.