Effetto Glow su Logo al Hover in Webflow (No Code)

Aggiungi un effetto glow sul logo al passaggio del mouse in Webflow — quello in cui un logo sboccia dolcemente e irradia luce appena ci arriva sopra il cursore — usando solo strumenti nativi: masking CSS, un blur backdrop-filter e le trasformazioni move e scale di Webflow collegate a un’interazione hover.

La cosa bella è che mette insieme una manciata di tecniche, ognuna utile per conto suo. Userai le custom property per mascherare un’immagine, un backdrop-filter per sfocare uno strato che sta dietro un altro, e l’opacità a strati per simulare vera profondità. Capisci come si incastrano qui e poi puoi tirare fuori una qualsiasi di queste per un progetto completamente diverso.

Niente JavaScript e niente plugin. Vive tutto nel Designer, guidato da proprietà che puoi vedere e ritoccare, così una volta capita la struttura puoi ricostruire tutto da zero e piegarlo a qualsiasi cosa tu stia facendo.

Come funziona

Il tutto è una piccola pila di strati, e la chiave per capirlo è che la pagina è costruita nel suo stato finale — com’è a metà hover — di proposito. Quando un’animazione è così stratificata, disegnare prima il risultato finale significa avere ogni pezzo visibile nel Designer, così leggi i valori esatti da animare e li aggiusti nel contesto invece di indovinare su un bersaglio invisibile.

Il glow è simulato con la profondità. Dentro un glow effect wrapper (con position: relative, così può fare da ancora a tutto il resto) ci sono più copie mascherate del logo. Ogni copia è un glow effect masked wrapper — posizionato in assoluto, che riempie il wrapper — e le uniche differenze tra loro sono opacità e trasformazione. Le copie girano intorno a 15%, 10% e 4% di opacità, spinte via via verso il basso e scalate un po’, ed è questo a leggersi come una morbida fioritura di luce invece che una forma piatta.

Il masking è la parte cruciale, e si fa con tre custom property di Webflow sull’elemento glow effect masked (quelle in fondo al pannello Style). mask-image è impostata su url(...) che punta all’immagine del logo copiata dal pannello Assets; mask-repeat è no-repeat; e mask-size è 100%. L’elemento sotto porta un gradiente lineare — quel gradiente è il colore che vedi, e la maschera lo ritaglia semplicemente nella forma del logo. Un dettaglio che sembra un numero magico ma non lo è: l’aspect-ratio dell’elemento mascherato è impostato sulle dimensioni reali in pixel dell’immagine mask (le leggi dal pannello impostazioni dell’asset), così la forma non si deforma mai.

Sopra sta il blur. A sfocare sono due cose. Un pannello glow effect blur più esterno copre la sezione con un backdrop-filter: blur da 30px e pointer-events: none — sfoca il logo attraverso di sé lasciando comunque arrivare il hover al logo sotto. E dentro ogni strato mascherato c’è un elemento glow effect blur mask col suo blur backdrop più piccolo (9px, 7px, 5px tra gli strati) per ammorbidire ogni copia. Fai quell’elemento di blur nettamente più largo del suo contenitore (intorno a 90vw) e centralo con left: 50% più una trasformazione x di -50% — se lo lasci vicino al 100% di larghezza il blur viene tagliato di netto ai bordi, e rovina l’effetto.

Infine, il movimento. Un’interazione Mouse Hover sul glow effect wrapper anima le trasformazioni move e scale delle copie mascherate e l’opacità del pannello di blur in cima. Nello stato iniziale è tutto allineato sul logo (move 0%, scale 1, opacità blur 0%); al hover i tre strati si aprono verso il basso e si rimpiccioliscono (move 35% / 65% / 90%, scale 0.95 / 0.9 / 0.8) mentre l’opacità del blur sale a 35%. Un easing ease-out-cubic sulle trasformazioni dà quel morbido assestamento, e l’animazione di hover-out sono semplicemente gli stessi passi che tornano ai valori a riposo.

Come si usa

1. Clona il progetto. Prendi il cloneable Webflow così hai già la struttura completa degli strati, il riempimento a gradiente e l’interazione pronti da ispezionare e adattare.

2. Prepara il wrapper. Dai alla sezione position: relative e anche al glow effect wrapper position: relative, così gli strati mascherati e i pannelli di blur posizionati in assoluto hanno un riferimento a cui ancorarsi.

3. Maschera il tuo logo. Carica il logo nel pannello Assets. Sull’elemento glow effect masked, aggiungi le tre custom property: mask-image come url(...) col link dell’asset copiato, mask-repeat come no-repeat e mask-size come 100%. Imposta l’aspect-ratio del masked wrapper sulla larghezza e altezza reali dell’immagine (dal suo pannello impostazioni) e dai all’elemento mascherato uno sfondo a gradiente lineare per il colore del glow.

4. Impila gli strati. Duplica il masked wrapper qualche volta, posiziona ciascuno in assoluto per riempire il wrapper e abbassa l’opacità via via (circa 15%, 10%, 4%). Dentro ognuno, aggiungi l’elemento blur-mask con un blur backdrop-filter (9/7/5px), una larghezza intorno a 90vw e left: 50% con una trasformazione x di -50% per centrarlo.

5. Aggiungi il blur in cima. Piazza il pannello glow effect blur più esterno sopra la sezione con backdrop-filter: blur(30px) e pointer-events: none così esalta il glow senza bloccare il hover.

6. Collega l’interazione hover. Sul glow effect wrapper, aggiungi un’interazione Mouse Hover. Nell’animazione di hover-in, imposta move/scale/opacità-blur degli strati sui valori a riposo e segnali come stato iniziale, poi anima verso i valori aperti (move 35/65/90%, scale 0.95/0.9/0.8, opacità 35%) sul keyframe a 0s con ease-out-cubic. Duplicala per l’hover-out e riporta tutto ai valori a riposo.

7. Rendilo tuo. Per mascherare una foto invece di un glow pieno, cambia lo sfondo dell’elemento mascherato da gradiente a immagine — la forma della maschera resta, cambia solo il riempimento. Aggiusta lo sfondo della pagina e la quantità di blur a piacere.