Come realizzare un menù con effetto 3D

14 Feb Come realizzare un menù con effetto 3D

In questo video tutorial ti mostro come realizzare un menù un pò particolare grazie alla combinazione di trasformazioni Css e box shadow che creano un effetto tridimensionale nel momento in cui con il mouse hover mettiamo in evidenza l’immagine. Il testo sull’immagine nella situazione di partenza è nascosto grazie all’opacità messa a valore zero e poi torna con opacità 1 allo stato “hover”. Il tutto è reso più accattivante con le transizioni Css.

Segui i seguenti step:

1. Crea la griglia per l’inserimento delle immagini;
2. Nascond le voci di testo con opacità pari a 0;
3. Imposta l’opacità pari a 1 con lo stato “hover”;
4. Inserisci lo stile per le proprietà dello stile del testo;

GUARDA L’ESEMPIO

Puoi scaricare la risorsa dal mio negozio di risorse digitali ad un prezzo irrisorio

Per piacere seguici e metti mi piace: