CSS : Passer une image noir & blanc en couleur (ou inversement)

1

Un ami m’a fait une petite demande pour son site WEB et je me suis dit que l’astuce ci-dessous pourrait en intéresser quelques-uns. Comment mettre une image couleur en noir & blanc et lorsque je passe la souris dessus la repasser en couleur ?
image-couleurs

Passer une image en noir & blanc

2 images

Il existe plusieurs techniques. L’une d’entre elles, peut-être la plus connue, est d’utiliser 2 images, dont l’une en couleur et l’autre en noir et blanc. À cela s’ajoute un test pour savoir si la souris passe au-dessus de l’image ou non. Ça, c’est ce que l’on faisait il y a encore quelques années et le résultat était là. Il fallait avoir 2 images exactement identiques et cela alourdissait le chargement de la page (poids des images et le code).

CSS : Filter grayscale

Si vous avez développé un site moderne, vous devez utiliser les styles et les CSS ne vous font pas peur.

<style type="text/css">

img:hover {

-webkit-filter: grayscale(100%); /* Pour les navigateurs Chrome, Safari, Opera */
filter: grayscale(100%); /* Firefox */

}

</style>

image-couleur

Toutes les images (img) vont passer en gris lorsque la souris va passer dessus. Il ne s’agit pas de la demande de mon ami, mais cela peut en intéresser plus d’un.Vous vous en doutez un peu, mais je vous le dis clairement, IE (Internet Explorer) et Edge ne supporte pas cette fonction.

Maintenant, mon ami veut l’inverse… L’image doit se charger avec le filtre gris appliqué à 100% et lorsque l’on passe dessus hover on désactive le filtre.

<style type="text/css">

img:hover  {

-webkit-filter: grayscale(0%); /* Chrome, Safari, Opera */
filter: grayscale(0%); /* Firefox */ }

img{

-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%); /* Firefox */ }

</style>

Bien sûr pour que cela ne s’applique pas à toutes les images de votre site… il faudra encadrer cela en utilisant avec une div/class.
Ajoutons un petit effet… Il est possible d’améliorer un peu le rendu pour qu’il y ait une petit transition entre les 2 rendu (noir&blanc et couleur).

-webkit-transition:all 0.3s;
transition:all 0.3s;

Au final vous aurez quelque chose comme ceci

<head>

<style type="text/css">

.grayscale img:hover  {

-webkit-filter: grayscale(0%); /* Chrome, Safari, Opera */
filter: grayscale(0%);
-webkit-transition:all 0.3s;
transition:all 0.3s;

}

.grayscale img{

-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);

}

</style>

</head>

image-couleur

Et dans votre code, vous devriez avoir quelque chose du genre

<body>

<div class="grayscale">

<img src="monImage.jpg" alt="Mon image" width="200" height="200">

</div>

</body>

image colorée

Partager.

A propos de l'auteur

Passionné de nouvelles technologies, je suis un touche-à-tout. Mon smartphone ne me quitte (presque) jamais. Je peux vous parler des NAS pendant des heures.

  • Webmail

    Intéressant, c’est fou ce qu’on peut faire grâce aux CSS3 !

Lire les articles précédents :
HTTPS pour WordPress, simplement et efficacement…

Entre le moment où OVH a mis en place Let's Encrypt et le moment où j'ai pu enfin le mettre en...

Fermer