Di seguito è riportato un guest post di Dylan Winn-Brown, che ci mostra un modo performante per realizzare questo effetto di design.

Mentre lavoravo sul sito Web di un cliente di recente, mi è stato chiesto di replicare un effetto come questo.

Questo tipo di effetto è particolarmente utilizzato in situazioni di tipo portfolio in cui il design intende mostrare dettagli sia visivi che informativi.

Ci sono molti diversi metodi possibili

Poiché non avevo mai creato un effetto come questo prima, ho iniziato a dare un’occhiata a diversi modi di farlo e mi sono imbattuto in una serie di metodi diversi.

Un’opzione era quella di utilizzare un plugin jQuery. Questo non era proprio l’effetto che cercavo, e certamente non molto leggero.

Un’altra opzione era quella di posizionare un <img> all’interno del contenitore e manipolarlo con CSS. Potrebbero esserci alcuni potenziali vantaggi qui, come la possibilità di impostare la sorgente con srcset in modo che l’immagine utilizzata sia appropriata per le prestazioni e il dispositivo.

Nella mia situazione, volevo gestire l’effetto interamente in CSS, quindi sono andato per quello.

Funzionalità di base

Per ottenere prestazioni ottimali, ho deciso di utilizzare la proprietà CSS transform per gestire l’ingrandimento dell’immagine. (Le animazioni CSS beneficiano dell’accelerazione hardware e di conseguenza appaiono più fluide rispetto ad altri metodi di animazione.)

Invece di un<img>, ho usato un<div> aggiuntivo all’interno del genitore per agire come immagine. La struttura è:

<div class="parent"> <div class="child"></div></div>

Per prima cosa specifichiamo le dimensioni per l’elemento genitore. Quindi il bambino può riempire il genitore usandowidth: 100% eheight: 100%;, oltre a impostare l’immagine di sfondo, assicurandosi che si ridimensiona per coprire l’area.

.parent { width: 400px; height: 300px;}.child { width: 100%; height: 100%; background-color: black; /* fallback color */ background-image: url("images/city.jpg"); background-position: center; background-size: cover;}

Aggiungiamo quindi effetti hover al nostro elemento genitore che influenzeranno il nostro elemento figlio. Uno stile di messa a fuoco è buono anche per l’accessibilità:

.parent:hover .child,.parent:focus .child { transform: scale(1.2);}

Potresti voler usare uno strumento per aggiungere prefissi per il miglior supporto possibile del browser.

Per completare l’effetto di base, possiamo aggiungere alcune transizioni allo stato normale del nostro elemento figlio:

transition: all .5s;

Se si desidera aggiungere una sovrapposizione di colori, è possibile utilizzare pseudo elementi come ::before:

.child::before { content: ""; display: none; height: 100%; width: 100%; position: absolute; top: 0; left: 0; background-color: rgba(52, 73, 94, 0.75);}.parent:hover .child:before,.parent:focus .child:before { display: block;}

Ora quando passiamo il mouse sull’elemento genitore, l’elemento figlio dovrebbe mostrare una sovrapposizione di colori!

Infine, tratteremo come aggiungere del testo da mostrare sulla nostra sovrapposizione. Possiamo aggiungere un elemento al nostro attuale elemento figlio in questo modo:

<div class="parent"> <div class="child"> <span>Hello</span> </div></div>

Possiamo dare al nostro <span> un po ‘ di stile:

span { color: white; /* Good thing we set a fallback color! */ font-family: sans-serif; padding: 25%; position: absolute;}

e possiamo renderlo visibile solo quando passiamo il mouse sul .parent:

.parent:hover span,.parent:focus span { display: block;}

Demo live

Vedere lo zoom dell’immagine della penna sui siti Web hover – portfolio di Dylan (@dwinnbrown) su CodePen.

Supporto mobile

Se i contenitori sono collegamenti e gli stati di hover non rivelano alcuna informazione essenziale, potresti semplicemente lasciarlo da solo.