web-dev-qa-db-fra.com

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

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 qui soit IE et Firefox pris en charge?

cssmouseovergrayscale
82
Meta

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

CSS pur (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%);
}
_
_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+, IE10 */
  filter: gray;
  /* IE6-9 */
  -webkit-filter: grayscale(100%);
  /* Chrome 19+ & Safari 6+ */
  -webkit-transition: all .6s ease;
  /* Fade to color for Chrome and Safari */
  -webkit-backface-visibility: hidden;
  /* Fix for transition flickering */
}

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

svg {
  background: url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg);
}

svg image {
  transition: all .6s ease;
}

svg image:hover {
  opacity: 0;
}_
_<p>Firefox, Chrome, Safari, IE6-9</p>
<img class="grayscale" src="http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s1600/a2cf7051-5952-4b39-aca3-4481976cb242.jpg" width="400">
<p>IE10 with inline SVG</p>
<svg xmlns="http://www.w3.org/2000/svg" id="svgroot" viewBox="0 0 400 377" width="400" height="377">
  <defs>
     <filter id="filtersPicture">
       <feComposite result="inputTo_38" in="SourceGraphic" in2="SourceGraphic" operator="arithmetic" k1="0" k2="1" k3="0" k4="0" />
       <feColorMatrix id="filter_38" type="saturate" values="0" data-filterid="38" />
    </filter>
  </defs>
  <image filter="url(&quot;#filtersPicture&quot;)" x="0" y="0" width="400" height="377" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s1600/a2cf7051-5952-4b39-aca3-4481976cb242.jpg" />
   </svg>_

Vous pouvez trouver n article sur cette technique ici .

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

Cette approche nécessite deux copies d'une image: une en niveaux de gris et l'autre en couleur. En utilisant le CSS :hover psuedoselector, 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};
}
_
_#google {
  background: url('http://www.google.com/logos/keystroke10-hp.png');
  height: 95px;
  width: 275px;
  display: block;
  /* Optional for a gradual animation effect */
  transition: 0.5s;
}

#google:hover {
  background: url('https://graphics217b.files.wordpress.com/2011/02/logo1w.png');
}_
_<a id='google' href='http://www.google.com'></a>_

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

Envisager une bibliothèque tierce

La bibliothèque désaturate 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 même fichier. élément ou image.

236
Rion Williams

Répondu 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 d'utiliser simplement CSS. Il s’agit d’une approche d’amélioration progressive qui ne fait que revenir aux versions couleur des 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 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>
12
Uriah Blatherwick

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);
    }
5
Stefan Gruenwald

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/

0
Diodeus - James MacFarlane