Creare un effetto fade sulle immagini con CSS3

 

Un tempo l’unico modo per sfumare un elemento o un’immagine era quello di utilizzare JavaScript o jQuery. Oggi, con CSS3 è possibile creare facilmente un effetto fade di dissolvenza con pochissime linee di codice ed in modo estremamente semplice.Questo effetto può essere applicato a piacimento al passaggio del mouse su di immagini o anche su semplice testo. Vediamo come.

Effetto Fade – Codice CSS

 

Applichiamo ora la classe CSS ad un’immagine:

 

Risultato effetto fade (passa col mouse sopra l’immagine):

L’effetto fade come detto può essere applicato anche a del testo o elementi html come <div> o <p> in genere aggiungendo semplicemente la relativa classe CSS. Buon lavoro e alla prossima risorsa!

pixolo ads
Cambia Copertina
10472 | Articolo pubblicato 4 anni fa nella categoria Css - Html.
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.
  • Enzo

    Ho provato ad inserire il vostro codice nel mio sito, ho fatto il copia e incolla del CSS all’interno del mio foglio di stile,il classico style.css, ed ho inserito il richiamo class=”fade” nel campo dell’immagine dove viene richiamata, ma non funziona come mai? Uso il CMS wordpress.

    Grazie

    • pixolo

      Puoi dare l’indirizzo del tuo sito?

10
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
×