Pillole Css: effetto hover al passaggio del mouse

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:

  1. 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

  2. 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:

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Up Next:

Grunge font free per web designer : Zero and zero

Grunge font free per web designer : Zero and zero