Image en niveaux de gris avec CSS & changement de couleur au passage de la souris?

Question

Je cherche à prendre une icône qui est colorée (et sera un lien) et la transformer en niveaux de gris jusqu'à ce que l'utilisateur place sa souris sur l'icône (où il colorierait alors l'image).

Est-ce possible, et d'une manière compatible avec IE et Firefox?

Answer 1

Il existe de nombreuses méthodes pour arriver à ce résultat:

1.) CSS-Seulement à l'aide d'une seule image couleur en image

img.grayscale {
  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"); /* Firefox 3.5+ */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}

img.grayscale:hover {
  filter: none;
  -webkit-filter: grayscale(0%);
}

Démo et Source

2.) CSS Uniquement, à l'aide de deux séries d'Images (niveaux de Gris et Couleur)

Vous auriez besoin de deux copies de l'image en niveaux de gris et l'autre en couleur, et ensuite, à l'aide de CSS, vous pouvez simplement appliquer un hover style de votre image colorée.

#yourimage { background: url(../YourBlackAndWhiteImage.png);}
#yourImage:hover { background: url(../YourColoredImage.png};}

Travail De Démonstration

cela peut également être réalisé à l'aide de jQuery hover() méthode.

3.) À l'aide d'une bibliothèque spécifique pour accomplir cette fonctionnalité:

La désaturation de la bibliothèque manipule des images, vous permettant de basculer facilement entre une version en niveaux de gris et plein de couleur version.

Answer 2

La réponse ici: Convertir une image en niveaux de gris en HTML/CSS

Vous n'avez même pas besoin d'utiliser deux images qui sonne comme une douleur ou une manipulation de l'image de la bibliothèque, vous pouvez le faire avec la croix-prise en charge du navigateur (version actuelle) et il suffit d'utiliser les CSS. C'est une approche d'amélioration progressive qui tombe tout juste de retour de versions de couleur sur les anciens navigateurs:

img
{
    filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
}
img:hover
{
    filter: none;
    -webkit-filter: none;
}

et les filtres.svg fichier comme ceci:

<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>

Answer 3

J'utilise le code suivant sur http://www.diagnomics.com/

Transition douce du noir et blanc à la couleur avec effet grossissant (échelle)

     img.color_flip {
      filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
      filter: gray; /* IE5+ */
      -webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */
      -webkit-transition: all .5s ease-in-out;
    }

    img.color_flip:hover {
      filter: none;
      -webkit-filter: grayscale(0);
      -webkit-transform: scale(1.1);
    }
 

Answer 4

Vous pouvez utiliser un sprite qui contient à la fois la version colorée et le monochrome.

Answer 5

Voici une démo. Même fonctionne dans IE7:

http://james.padolsey.com/demos/grayscale/

et

http://james.padolsey.com/javascript/grayscaling-in-non-ie-browsers/