Comment faire pour qu'une image HTML soit en noir et blanc et en couleur au survol de la souris ?
Bonjour, j'aimerais afficher une image qui est initialement en couleur, en noir et blanc ; puis lorsqu'on survole l'image avec le pointeur de la souris il faudrait la remettre en couleur. J'ai vu qu'il existait le filtre CSS grayscale pour mettre l'image en noir et blanc, mais je ne comprend pas comment la remettre ensuite en couleur.
Vous pouvez en effet utiliser le filtre grayscale pour mettre l'image en noir et blanc. Pour cela il faut créer une CLASS que vous ajoutez ensuite à la balise image <img>.
On crée ainsi une CLASS CSS nommée nb et on applique la valeur 100% au filtre grayscale :
.nb {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
Pour détecter le survole de l'image par le curseur de la souris, vous pouvez également utiliser du code CSS et plus particulièrement la pseudo-classe :hover. On applique alors la valeur 0% au filtre grayscale :
nb:hover {
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
Il vous suffit ensuite d'ajouter la CLASS nb à la balise image <img> :
<img src="https://www.collaborativejob.com/os.jpg" class="nb" alt="">
Voici l'exemple complet :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Comment faire pour qu'une image HTML soit en noir et blanc et en couleur au survol de la souris ?</title>
<style>
.nb {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.nb:hover {
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
</style>
</head>
<body>
<img src="https://www.collaborativejob.com/os.jpg" class="nb" alt="">
</body>
</html>
Une démonstration est disponible dans le Bac à Codes.