Foncer une image au passage de la souris

Bonjour;)

je cherche à foncer des images placées dans une colonne au passage de la souris sur mon thème wordpress.

Le code CSS ne semble pas poser de problème :

.fond_image{
background:#000000;
display:inline-block;
}
.fond_image img{
-moz-transition: opacity 0.9s;
-webkit-transition: opacity 0.9s;
-o-transition: opacity 0.9s;
}
.fond_image img:hover{
opacity:0.8;
-moz-transition: opacity 0.7s;
-webkit-transition: opacity 0.7s;
-o-transition: opacity 0.7s;
}

En revanche, j'ai un problème avec la partie html, car on me recommande d'appliquer le css sur une div, de la manière suivante :
<div class="fond_image">
<img src="img/image1.jpg" alt="effet sympa sur le survol d'une image" />
</div>

or dans le code html, je n'ai que des "figures" qui contiennent les images :
<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"className":"size-large"} -->
<figure class="wp-block-image size-large"><a href="http://lx-designer.com/module-droit-a-limage/"><img src="https://lxdesignercom.files.wordpress.com/2020/01/imagette-droit-acc80-limage-1.png?w=742" alt="" class="wp-image-81"/></a></figure>
<!-- /wp:image -->

<!-- wp:image {"id":227,"linkDestination":"custom","className":"size-large"} -->
<figure class="wp-block-image size-large"><a href="http://lx-designer.com/module-rgpd/"><img src="https://lxdesignercom.files.wordpress.com/2020/01/imagette_rgpd-1.png?w=745" alt="" class="wp-image-227"/></a></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

Je ne sais pas où insérer "fond_image" pour que cela fonctionne....(j'ai tenté de remplacer figure par div, mais ça ne marche pas...)

J'espère avoir été explicite et merci par avance pour votre aide.
Modifié par NNK (09 Feb 2020 - 15:04)

ben tu applique ton style a une image

Oui, mais comment appliquer le style à l'image, et surtout où placer "fond_image" dans le code html pour que ça fonctionne ?
C'est ça ma question en fait.

Je reformule encore : comment écrire le code html pour que ça fonctionne avec "figure" et non "div".

Merci par avance pour vos réponses.

Bonjour,
déjà, je vois que dans ".fond_image img" tu mets les prefix, mais pas "opacity" sans prefix. Dans la div suivante, tu le mets, mais il doit être normalement en fin de liste. C'est une convention, sans être certain que ça ne fonctionnerait pas en début de liste.
Ensuite, normalement, on écrit ça comme ça :

<figure>
   <div class="maclass">
  <img src="Images/###.jpg" alt="###"/>
  <img src="Images/###.jpg"  alt="###"/>
</div>
</figure>

et en css, on cible la div "maclass", pas figure.
Opacity est bien pour tester le code, c'est une commande rapide, mais après, il faut lui préférer sgbd. Le b de sgbd n'appliquera opacity que sur ce qui est ciblé, et non pas l'ensemble. Figure est très bien expliqué ici :https://www.alsacreations.com/article/lire/1337-html5-elements-figure-et-figcaption.html
ps : Rectification, c'est le "d" de sgbd et non le "b" comme je lai écrit
Modifié par Bongota (10 Feb 2020 - 08:32)

ok, merci. Je vais chercher sgbd.

Bonjour NNK,

Pour moi, tu as juste à mettre ta class "fond_image" dans la class de "figure"
Exemple :
https://codepen.io/Zonecss/pen/rNVeapd