Mostrare foto a colori in bianco e nero e viceversa al passaggio del mouse.

Come colorare le immagini in bianco e nero al passaggio del mouse e come renderle grigie se sono a colori con l'effetto grayscale.

Nel precedente post abbiamo visto come con l'utilizzo di eventi creati dal mouse possiamo applicare un effetto zoom alle immagini quando ci si passa o ci si clicca sopra con il mouse.

Come preannunciato questo tipo di eventi oltre ad essere applicati nel javascript sono molto utili anche nel CSS3 specialmente adesso che questo linguaggio è supportato senza eccezioni da tutti i principali browser.

Probabilmente avrete visto che in alcuni siti quando si passa sopra a una immagine con il cursore questa si modifica nell'aspetto diventando più opaca o più trasparente oppure diventando grigia se è a colori o colorandosi se è in bianco  nero.

Lascio a un prossimo post la trattazione della modifica della trasparenza con l'effetto hover e in questo mi occuperò di come mostrare un immagine a colori o in scala di grigi al passaggio del cursore. In sostanza possiamo pubblicare una foto che in situazione normale è in bianco e nero che si colora al passaggio del mouse e pubblicare una foto a colori che invece diventa in bianco e nero al passaggio del cursore.

Possiamo operare questa personalizzazione per una immagine singola oppure anche per tutte le immagini del blog. Mostrerò questa seconda personalizzazione per gli utenti di Blogger ma si può facilmente estendere a qualsiasi CMS che supporta questo tipo di personalizzazioni.

IMMAGINE IN BIANCO E NERO CHE SI COLORA CON IL MOUSE

Occorre innanzitutto caricare nel web una immagine colorata e ottenerne il suo link diretto. Se siete utenti di Blogger basterà creare una Bozza di post in cui postare l'immagine o le immagini. Si va poi su HTML nell'Editor e si copia l'indirizzo della foto che potrà essere utilizzato nei codici.

Successivamente la Bozza di post potrà anche essere eliminata visto che le immagini caricate rimarranno comunque nel vostro account Google Foto. Il codice per creare un simile effetto è il seguente:

<div align="center">
<style>
.effettogrigio img {
  filter: grayscale(100%);
}
.effettogrigio img:hover {  
  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 possono essere personalizzati i livelli di grigio che qui sono presi estremi cioè 100% in condizioni normali e 0 quando ci si passa sopra con il mouse. L'URL colorato di rosso è stato inserito a titolo di esempio e dovrà essere sostituito con quello della vostra immagine. Il tag center serve per centrare l'immagine e può anche essere sostituito da left o right. La classe effettogrigio può essere sostituita da un'altra espressione.

Il risultato sarà il seguente:

Tale codice va incollato in Modalità HTML nell'Editor del post in Blogger o Wordpress.

FOTO A COLORI CHE DIVENTA GRIGIA AL PASSAGGIO DEL MOUSE

Vediamo l'effetto inverso cioè quello di una immagine che in situazione normale è in bianco e nero che si colora al passaggio del cursore. Dobbiamo avere il link diretto di una immagine a colori che è stata pubblicata nel web con la modalità precedente o con un altro qualsiasi metodo. In questo caso il codice diventa:

<div align="center">
<style>
.effettocolore img {
  filter: grayscale(100%);
}
.effettocolore img:hover {  
  filter: grayscale(0);
}
</style>
<div class="effettocolore"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6FVZQ_0ukr4ku1AoGVAyzcnXRx0_HVJKxUVtsez4s5xabAThsmGB1BRXvhWTsC16AKpxd6-eYPNRanSPPfpMxFnIM082OXYT_txW1L8JPpmA3Gebt541cSDfqdi6hote5jVe9rfb7VYY/w700-h472-no/notturno.jpg"/></div>
</div>

con il livello di bianco e nero che è stato ribaltato rispetto all'effetto precedente.

Il risultato che si otterrà sarà il seguente:

Si può decidere di applicare questi effetti anche a tutte le immagini presenti nei post.

EFFETTO GRAYSCALE IN BLOGGER

Vediamo come applicare gli effetti precedenti a tutte le immagini presenti nei post di Blogger quindi non alle immagini dell'Header e  quelle presenti nella sidebar o nel footer.

Dopo aver salvato il template si va su Tema -> Modifica HTML e si cerca la riga ]]></b:skin> con Ctrl+F.  Se non fosse immediatamente visibile occorre cliccare sulla freccetta nera posta sulla sinistra della sezione <b:skin> per visualizzare tutto il codice. Per il primo effetto, cioè per far diventare colorate le immagini in bianco e nero al passaggio del mouse, si incolla questo codice sopra a detta riga:

.post-body img {
     filter: grayscale(100%) !important;
}
.post-body img:hover {
     filter: grayscale(0) !important;
}

quindi si salva il template. Possono essere personalizzati i valori del grigio come in precedenza. L'effetto che si ottiene è quello di mostrare tutte le foto del blog in bianco e nero che però si colorano al passaggio del mouse.

Per il secondo effetto cioè per mostrare le immagini del sito a colori ma che diventano grigie al passaggio del cursore il codice da usare è il seguente in cui sono state semplicemente invertite le percentuali:

.post-body img {
      filter: grayscale(0) !important;
  }
  .post-body img:hover {
      filter: grayscale(100%) !important;
  }

Tutti questi effetti funzioneranno anche nella versione mobile del sito se la avete abilitata.