Comment passer une image en noir et blanc avec les filtres CSS ?

On peut vouloir afficher des images en couleur pour des produits à vendre par exemple, mais griser ces images une fois le produit vendu par exemple.

Si je crée mon style d’image pour obtenir un rendu comme ceci :

Pour le cas où mon produit est vendu et que je souhaite donc mettre l’image en noir et blanc, j’ajouterais une classe « grey » à mon élément image.

<div class="saler-image">
   <img class="sold" src="./resources/images/sold.png" />
   <img class="grey" src="./images/vehicule-combi.jpg" alt="vehicule-combi" />
</div>

Et dans mon fichier CSS, je vais simplement ajouter un filtre :

 img.grey, img.grey{
    filter: grayscale(80%);
    -webkit-filter: grayscale(80%);
    -moz-filter: grayscale(80%);
    -ms-filter: grayscale(80%);
    -o-filter: grayscale(80%);
 }

Ici, on peut donc ajuster le pourcentage de noir et blanc avec 0% étant l’image en couleur jusqu’à 100% pour une image en noir et blanc pur.