MrPhotoshop, non vuole una gif animata, ma un'immagine che passandoci sopra con il mouse cambi.
Quindi basterebbe:
Codice:
.immagine {
background-color: trasparent;
background-image: url('LINK_IMMAGINE');
background-position: top;
background-repeat: no-repeat;
height: 200px;
width: 100px;
}
.immagine:hover {
background-position: bottom;
}
In questo modo, avendo un'immagine alta 400px, larga 100, che contiene nei primi 200 pixel l'immagine normale, negli altri 200, quindi sotto, l'immagine che si vedrebbe in :hover, tutto è ottimizzato per tutti i browser, non deve caricare immagini pesanti e non deve aspettare il load.
Guardando il link che gli ho postato prima, qualche post più su, capirai
Se mi dai un'immagine di esempio, ti creo on-line una pagina esemplificativa