Straordinari nuovi effetti hover sulle immagini con CSS3

 

La potenza di CSS3 è enorme e in questo tutorial verrà mostrato come sfruttarla in modo davvero molto creativo. Vedremo alcuni bellissimi effetti hover applicati a delle miniature e creati con transizioni CSS3.
Il risultato sarà che al passaggio del mouse sopra l’immagine apparirà una descrizione relativa, in ogni esempio differente per animazione e stile.

Effetti hover sulle immagini – Codice base

La struttura del codice è molto semplice ed intuitiva. Servirà creare un contenitore che conterrà la nostra immagine, la descrizione ed il link. All’interno di esso verrà inserito un elemento con classe mask che sarà responsabile della riproduzione dei vari effetti CSS3.

Fatto ciò andremo a specificare un codice CSS di base valito e necessario indifferentemente dall’effetto utilizzato.

Infine, scaricando il file Zip che trovate sotto, avrete solo da scegliere l’effetto che desidererete utilizzare ed implementare così di conseguenza il codice CSS3 relativo ad esso e che troverete come detto nel pacchetto da scaricare.

Potete guardare la demo per vedere tutti i 10 effetti hover disponibili. Buon lavoro!

Demo Download Info | Sito Web | Autore

pixolo ads
Animal Comix
25258 | Articolo pubblicato 4 anni fa nella categoria Css - Html, In evidenza.
Puoi seguire tutti i nuovi articoli e gli aggiornamenti di Pixolo.it attraverso i Pixolo feeds feed RSS.
Puoi inoltre lasciare un commento, oppure fare un trackback dell'articolo dal tuo sito.
  • Buco Inthewall

    ho seguito il tutorial ma implementando uno degli effetti non succede nulla, sapreste darmi una spiegazione, grazie.

14
SHARES
Be Sociable,
share and enjoy!
Resta aggiornato!
Segui Pixolo anche su Facebook!
Don't show more - I am already fan
×
Salva il post su Facebook
What is a Facebook Save Button?

The save button lets you save the current page to your private list on Facebook for a future use or consultation.
info | close
×