Vediamo come trasformare un’immagine in bianco e nero con CSS, per ottenere ottimi effettivi visivi e arricchire il nostro sito internet con qualche effetto grafico.
Gestire le immagini e gli effetti grafici con il css è una scelta che ha molti vantaggi. Quello che vi proponiamo è un metodo che permette di rendere le immagini a colori in bianco e nero tramite il css. Possiamo anche, con qualche accorgimento, creare degli effetti al passaggio del mouse, passando con un’effetto di transizione dal bianco e nero al colore.
<style>
.biancoNero {
filter: grayscale(1);
}
</style>
<img class="biancoNero" src="immagine.jpg" />Partendo da questo codice possiamo quindi dare un’effetto da bianco nero a colore con il passaggio del mouse.
<style>
.biancoNero {
filter: grayscale(1);
transition-duration: 0.5s;
}
.biancoNero:hover {
filter: grayscale(0);
transition-property: filter;
transition-duration: 0.5s;
}
</style>
<img class="biancoNero" src="immagine.jpg" />Esempio CSS Immagine Bianco e Nero
