Image en niveaux de gris avec CSS et re-couleur au survol de la souris?

86

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

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

css mouseover grayscale Meta
la source
2
Presque dupliqué ... stackoverflow.com/q/609273/670377
Tom Sarduy
ne serait-ce pas un effet plus intéressant si vous faisiez l'inverse? laisser le curseur de la souris être un peu comme une baguette magique qui apporte de la couleur à un monde sombre?
X10D le

Réponses:

242

Il existe de nombreuses méthodes pour y parvenir, que je détaillerai avec quelques exemples ci-dessous.

CSS pur (en utilisant une seule image colorée)

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%);
}

Afficher l'extrait de code

Vous pouvez trouver un article lié à cette technique ici .

CSS pur (en utilisant une échelle de gris et des images colorées)

Cette approche nécessite deux copies d'une image: l'une en niveaux de gris et l'autre en couleur. En utilisant le CSS :hoverpsuedoselector, vous pouvez mettre à jour l'arrière-plan de votre élément pour basculer entre les deux:

#yourimage { 
    background: url(../grayscale-image.png);
}
#yourImage:hover { 
    background: url(../color-image.png};
}

Afficher l'extrait de code

Cela pourrait également être accompli en utilisant un effet de survol basé sur Javascript tel que la hover()fonction de jQuery de la même manière.

Envisagez une bibliothèque tierce

La bibliothèque de désaturation est une bibliothèque commune qui vous permet de basculer facilement entre une version en niveaux de gris et une version en couleur d'un élément ou d'une image donné.

Rion Williams
la source
Si ces images doivent être liées à un autre site Web, comment cela pourrait-il être fait si les images sont définies comme arrière-plans?
Meta le
1
Cela fonctionnerait de la même manière, consultez la démo dans la section 1. Si vous avez d'autres questions, je serai heureux de vous aider.
Rion Williams le
1
les gars, est-ce que quelqu'un a remarqué que cela ne fonctionne pas en safari? Je viens de vérifier et de trouver ce problème, existe-t-il un moyen de le résoudre?
Gajen
13

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 ressemblent à une douleur ou à une bibliothèque de manipulation d'images, vous pouvez le faire avec la prise en charge de plusieurs navigateurs (versions actuelles) et simplement utiliser CSS. Il s'agit d'une approche d'amélioration progressive qui revient simplement aux versions couleur sur les navigateurs plus anciens:

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 le fichier filters.svg 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>
Uriah Blatherwick
la source
6

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

Transition en douceur 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);
    }
Stefan Gruenwald
la source
Fonctionne très bien dans les navigateurs Webkit! Votre code ne fonctionne pas pour moi dans le navigateur Firefox mais là encore, je pense que cela a quelque chose à voir avec un fichier SVG et j'utilise une image bitmap dans ce violon jsfiddle.net/coolwebs/num04rya/10 Quelque chose d'étrange cependant - la transition effet dans Safari rend l'image «saccadée» lors du survol ....
Ryan Coolwebs
0

Vous pouvez utiliser un sprite dans lequel les deux versions (la couleur et le monochrome) sont stockées.

Feeela
la source