Oggi vedremo come realizzare un semplice effetto Hover al passaggio del mouse su un’immagine, animazione tra le più banali del web, ma anche tra le più usate senza usare nemmeno una riga di codice javascript.
L’articolo e’ stato scritto da Giacomo, che continua a condividere le sue conoscenze grazie al blog, se volete unirvi anche voi siamo sempre in cerca di collaboratori 😉 potete inviarci una mail con un’articolo di prova.
Il principio si basa sulla regola css “display”, di fatto si rende un’immagine invisibile ( “display:none”; ) dopodichè al passaggio del mouse (indicato nei css con :hover) l’immagine viene visualizzata attraverso “display:block”, che blocca letteralmente l’immagine rendendola visibile.
Ecco il codice:
<div class="cambioimmagine"> <img class="immagine1" src="avatar10.png" /> <img class="immagine2" src="avatar11.png" /> </div>
Mentre nei CSS:
.immagine1 {
display: block; //stato di base img 1
}
.immagine2 {
display: none; //stato di base img2
}
.cambioimmagine {
float: left; // potete anche non metterlo, serve per posizionare il contenitore a sinistra
}
.cambioimmagine:hover .immagine1 {
display: none; // al passaggio del mouse (:hover) l'immagine 1 scompare
}
.cambioimmagine:hover .immagine2 {
display: block; // una volta scomparsa la prima immagine appare la seconda
}
Per ulteriori chiarimenti vi invito a leggere i commenti nel codice. Potete vedere una demo del cambio immagine a questo indirizzo.
Ecco il video-tutorial di Giacomo direttamente da Youtube:
grazie per aver pubblicato anche questo mio tutorial =)
ciao,
ho provato il tuo tutorial su un sito wordpress. l’unico problema riscontrato è legato all’attributo float: se lo tolgo non funziona più lo scambio tra le foto (se dalla foto sposto il mouse verso destra, solo verso destra, continua a rimanere la seconda foto). se invece lo lascio (o a destra o a sinistra) funziona tutto benissimo, ma mi incasina la pagina. hai una soluzione? nel caso, non fa niente. Grazie lo stesso e complimenti!!!
ciao
forse ho capito il problema, utilizzando lo stile float si da anche una larghezza al nostro elemento mentre se si toglie (e l’elemento non ha una larghezza preimpostata) occuperà tutto lo spazio che ha a disposizione, se le 2 immagini hanno la stessa larghezza prova ad aggiungere lo stile width nel css oppure nell’html in questo modo:
come?
ho capito! funziona!!! ho messo lo stile width nel css con la larghezza delle due foto. Grazie mille!!!!
Di niente 🙂
E scusa se non sono proprio capace a spiegarmi xD
Ciao, funziona perfettamente l’unica cosa è che quando vado sulla terza immagine (ultima della prima riga) l’immagine sucessiva si sposta direttamente sotto e non a inizio del paragrafo successivo.
Puoi vedere il risultato al link seguente: http://www.isaccoemiliani.it/reportage/
grazie mille
Isacco