Mostrare immagini in scala di grigi che si colorano al passaggio del cursore.

Effetto di immagini che saltano al passaggio del cursore e di foto grivgie che si colorano sempre al passaggio del mouse con effetti hover per Blogger ma anche per qualsiasi altro CMS.

Mi ero già occupato poco meno di due anni fa dell'effetto che colora le immagini al passaggio del mouse che aveva però il difetto di non funzionare con tutti i browser segnatamente con Firefox. Con gli aggiornamenti che hanno avuto tutti i principali browser e anche con l'introduzione del linguaggio CSS3 è adesso possibile avere questo effetto che funziona con Internet Explorer  9+, con Chrome 19+, con Firefox 3.5+ e con Safari 6+. Praticamente se non si ha un PC Windows XP con IE8 dovremo essere in grado di apprezzarlo.

Andiamo però per gradi e mostriamo come si possa realizzare un effetto applicabile a tutte le immagini del blog su Blogger al passaggio del cursore. Basta usare una struttura di codice in cui nella prima parte si inserisce la durata della transizione e nella seconda l'effetto che deve avvenire al passaggio del mouse e che è determinato dalla regola con img:hover.

EFFETTO SALTO

 

Dopo aver salvato il template si va su Modello > Modifica HTML, si cerca la riga ]]></b:skin> e subito sopra si incolla questo codice

.post-body img {   
    margin: 10px;
    -webkit-transition: margin 0.5s ease-out;
    -moz-transition: margin 0.5s ease-out;
    -o-transition: margin 0.5s ease-out;
}
.post-body img:hover {
    margin-top: 2px;
}

Dopo aver salvato il modello quando un lettore punterà una immagine presente in un post (e non una icona nella sidebar) questa si alzerà di 2 pixel e il movimento durerà 5 decimi di secondo. Questi parametri possono naturalmente essere modificati secondo i nostri gusti. Con margin-top:2px; margin-right:1px; si avrebbe un salto in alto di 2 pixel e uno laterale di 1 pixel.

EFFETTO GRIGIO PER TUTTE LE FOTO

 

Se vogliamo mostrare tutte le foto presenti negli articoli in una scala di grigi che si colorano al passaggio del mouse dobbiamo andare su Modello > Modifica HTML, cercare la riga ]]></b:skin> e, subito sopra, incollare questo nuovo codice

.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");
    filter: gray;
    -webkit-filter: grayscale(100%);
}
.post-body img:hover {
    filter: none;
    -webkit-filter: grayscale(0%);
}

Dopo aver salvato il template l'effetto sarà automatico per tutte le foto.

EFFETTO GRTIGIO SOLO PER ALCUNE IMMAGINI

 

Se volessimo usare questo effetto solo per alcune immagini il codice da incollare nel modello nella stessa posizione dei precedenti sarà il seguente

.effettogrigio 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");
    filter: gray;
    -webkit-filter: grayscale(100%);
}
.effettogrigio img:hover {
    filter: none;
    -webkit-filter: grayscale(0%);
}

Dopo aver salvato il modello per pubblicare una immagine con questo effetto dovremo andare nell'Editor e selezionare la modalità HTML quindi incollare l'immagine con questo codice

<div class="effettogrigio"><img src="URL_IMMAGINE"/></div>

dopo aver acquisito il link diretto della foto che avremo precedentemente caricata su Google+.

 

EFFETTO GRIGIO SOLO PER UNA IMMAGINE

 

Nel caso in cui avessimo interesse a mostrare solo una o pochissime foto con questo effetto potremo evitare di modificare il modello e postare il CSS direttamente nel post in questo modo

Innanzitutto dovremo  caricare la foto su Google+ e ottenerne l'hotlink quindi dovremo andare nell'Editor di Blogger e selezionare la modalità HTML cliccando sul pulsante accanto a Scrivi. 

Nella posizione in cui vogliamo che appaia l'immagine dovremo incollare un codice come questo 

<div align="center">
<style>
.effettogrigio 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");
    filter: gray;
    -webkit-filter: grayscale(100%);
}
.effettogrigio img:hover {
    filter: none;
    -webkit-filter: grayscale(0%);
}
</style>
<div class="effettogrigio"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6FVZQ_0ukr4ku1AoGVAyzcnXRx0_HVJKxUVtsez4s5xabAThsmGB1BRXvhWTsC16AKpxd6-eYPNRanSPPfpMxFnIM082OXYT_txW1L8JPpmA3Gebt541cSDfqdi6hote5jVe9rfb7VYY/w700-h472-no/notturno.jpg"/></div>
</div>

dove ho lasciato l'URL della foto che ho preso come test e in cui ho messo due righe all'inizio e alla fine che servono per centrare l'immagine evidenziate di giallo e che possono essere tralasciate.