Foncer une image au passage de la souris HTML

Signaler
-
Bonjour,

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 fond-image"} -->
<figure class="wp-block-image size-large fond-image"><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.