fare un'immagine girare in bianco e nero su hover

Question

Ho un'immagine collegata e voglio farlo girare in bianco e nero quando l'utente si posiziona su di essa. Qualcuno può aiutare, per favore? Ho bisogno di farlo con CSS o JavaScript. Grazie

Answer 1

provare questo:

img.imgClass:hover { 
    filter: url(filters.svg#grayscale); /* Firefox 3.5+ */ 
    filter: gray; /* IE5+ */ 
    -webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */ 
} 
img.imgClass { 
    filter: none; 
    -webkit-filter: grayscale(0); 
} 

Answer 2

È possibile cercare "maschere" in bianco e nero. Here è un articolo su questo.

Answer 3

In CSS 3 v'è una specifica per i filtri di immagine, ma questo non è widly ancora supportato anche nei browser moderni:

img:hover { 
    filter: url(filters.svg#grayscale); /* Firefox 3.5+ */ 
    filter: gray; /* IE5+ */ 
    -webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */ 

} 

Invece si potrebbe fare un bianco e nero alternativa per ogni immagine con questo effetto:

<a href="..."><img class="grayscale" src="..." /><img class="color" src="..." /></a> 

Con questo CSS: (non testato)

a img.grayscale { 
    display: none; 
} 
a:hover img.color { 
    display: none; 
} 
a:hover img.grayscale { 
    display: block; 
} 

predefinito il GRA l'immagine yscale è nascosta, al passaggio del mouse il colore viene nascosto e viene visualizzata la scala di grigi.