Effetto in bianco e nero per le immagini.

Come passare da una foto in bianco e nero a una a colori e viceversa al passaggio del mouse.

Nel post che ho dedicato al plugin Adipoli ho affrontato di sfuggita l'effetto grayscale che trasforma le immagini a colori in immagini in bianco e nero per poi farle tornare normali al passaggio del mouse. Questo effetto però su Blogger non funziona per una ragione che mi è ignota.

Ci sono anche altri sistemi per mostrare delle foto in bianco e nero che si colorano al passaggio del mouse o che viceversa diventano in scala di grigio quando passa il cursore.

Il problema di questi effetti è quello che funzionano solo con un determinato tipo di browser. Quello che va bene per Internet Explorer non va bene per Chrome e Safari mentre quello che va bene per loro non va bene per IE. Per Firefox invece le cose sono ancora più difficili.

Propongo tre tipi di effetti, due che funzionano con Chrome e Safari e uno che funziona solo con IE.

IMMAGINI IN GRIGIO CHE SI COLORANO CON IL MOUSE

Funziona solo con IE e il codice da usare per la singola immagine è questo

<style type="text/css">
img.grayscale {
position: relative;
filter: progid:DXImageTransform.Microsoft.BasicImage(grayScale=1);
}
</style>
<img class="grayscale"
onmouseover="this.className=''"
onmouseout="this.className='grayscale'"
src="URL_IMMAGINE"/>

Il risultato può essere apprezzato solo con IE, con Chrome usando l'estensione IE Tab Classic o con Firefox con l'addon IE Tab

IMMAGINI A COLORI CHE DIVENTANO IN BIANCO E NERO AL PASSAGGIO DEL CURSORE

Funziona solo con Chrome e Safari e il codice da usare è il seguente

<style type="text/css">
img.grayscale1 {
-webkit-transition: -webkit-filter 1s;
}
img.grayscale1:hover {
-webkit-filter: grayscale(100%);
}
</style>
<img class="grayscale1" src="URL_IMMAGINE"/>

Si ottiene questo risultato

IMMAGINI IN SCALA DI GRIGI CHE SI COLORANO CON IL MOUSE

Anche questo effetto funziona solo con Chrome e Firefox e si deve usare questo codice

<style type="text/css">
img.grayscale2 {
-webkit-filter: grayscale(100%);
-webkit-transition: -webkit-filter 0.2s;
}
img.grayscale2:hover {
-webkit-filter: grayscale(0%);
}
</style>
<img class="grayscale2"
src="URL_IMMAGINE"/>

Si ottiene questo effetto

Ricordo che al posto di URL_IMMAGINE deve essere inserito l'indirizzo della foto e che le classi colorate di viola hanno un nome arbitrario che può essere modificato con un altro. Tali classi insieme al tag style possono anche essere inserite nel modello sopra la riga </head>. In questo modo nel post è sufficiente richiamarne il nome dopo il tag <img . I valori di 1s e di 0.2s rappresentano il lasso di tempo occorrente per la trasformazione al passaggio del mouse e possono essere modificati.