Effet Noir et Blanc → Couleur au Survol avec CSS dans WordPress FSE

Dans WordPress FSE, il est possible de créer un effet élégant sur vos images : elles apparaissent en noir et blanc par défaut et reprennent leurs couleurs dès que l’on passe la souris dessus.

Pour garder un contrôle total, on peut appliquer l’effet uniquement sur certaines images en ajoutant une classe CSS personnalisée, par exemple hover-bw.

Étapes :

1. Dans l’éditeur de blocs, sélectionnez votre image en couleur.
2. Dans l’onglet Avancé, ajoutez la classe CSS supplémentaire hover-bw
3. Ajoutez le code suivant dans vos Styles CSS personnalisés :

/* ==========================
   Effet NB Couleur sur image
   ========================== */

.hover-bw {
  filter: grayscale(100%);
  transition: filter 0.5s ease-in-out;
}

.hover-bw:hover {
  filter: grayscale(0%);
}

Résultat :

• L’image s’affiche en noir et blanc au repos.
• Elle passe en couleur de façon fluide dès le survol.
• Compatible avec les images simples ou cliquables.