Foto bianco e nero che si colorano al passaggio del mouse Blogger

Dato che le immagini sono molto importanti per un blog perché riescono ad attirare l'attenzione dei visitatori, potrebbe essere utile adottare un CSS con effetto hover per le immagini su Blogger, che varia lo stile delle immagini se il cursore del mouse viene posizionato sopra di esse.

Questo css darà uno stile retrò al vostro blog, potrebbe essere utile per chi possiede blog che parlano di cose passate, di foto ricordo, di cronaca nera ecc.

Per installare questo effetto su Blogger dovete andare su Modello>Modifica HTML e cercare il tag  ]]></b:skin> e prima di esso si deve andare ad incollare il codice il codice sottostante che come già detto trasformerà le foto in bianco e nero che si coloreranno solo al passaggio del mouse.

Questo è il codice che trasforma tutte le foto in bianco e nero:

.post-body img {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
 /* Firefox 3.5+ */
    filter: gray;
 /* IE6-9 */
    -webkit-filter: grayscale(100%);
 /* Chrome 19+ & Safari 6+ */;
}
.post-body img:hover {
    filter: none;
    -webkit-filter: grayscale(0%);
}

Se invece volete utilizzare questo effetto solo in uno specifico post o per una specifica immagine il codice da utilizzare sarà quest'altro. In questo codice va inserito l'URL di un'immagine sostituendo "URL_IMMAGINE" e poi il link verso la pagina a cui si viene reindirizzati cliccando su di essa sostituendo "#".

<style type='text/css'>
img.grayscale {
-webkit-filter: grayscale(100%);
-webkit-transition: -webkit-filter 0.1s;
position: relative;
filter: progid:DXImageTransform.Microsoft.BasicImage(grayScale=1);
}
img.grayscale:hover {
-webkit-filter: grayscale(0%);
}
</style>
<a href="#"><img class="grayscale"
onmouseover="this.className=''"
onmouseout="this.className='grayscale'"
src="URL_IMMAGINE"/></a>

Per l'effetto inverso cioè per trasformare le immagini colorate in bianco e nero 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"/>

Questo è solo un assaggio di quello che è possibile fare per migliorare l'aspetto delle immagini del blog.