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.1formatik.fr/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.1formatik.fr/os.jpg" class="nb" alt="">
</body>
</html>
Une démonstration est disponible dans le Bac à Codes.
