-
Survol 2
Avec une seule adresse d'image, nous pouvons, au survol, colorer une même image en noir et blanc (ou sépia ou ...)
<div style="width:900px; height:506px; margin:5px auto; border:3px ridge black; text-align:left;">
<img id="sv3" src="http://ekladata.com/UARMGA3uJrfAQLULPzro4OX1hnA@900x506.jpg">
</div>
<style><!--
#sv3{filter:grayscale(1); transition:all 1s linear;}
#sv3:hover{filter:grayscale(0);}
--></style>L'image reçoit le filtre noir et blanc au départ (filter:grayscale(1);) et, au survol et selon les paramètres de la transition, le filtre s'annule (filter:grayscale(0);)
Vous pouvez remplacer l'adresse de mon image par la votre et modifier les dimensions selon vos choix.