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

Bonjour,

Le message qui suit est une réponse automatique activée par un membre de l'équipe. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose, ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention.
Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé.
Pour plus d'informations, nous vous invitons à lire les règles générales du forum

Merci de colorer votre code à l'aide du bouton Code

Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour cela, il faut utiliser le bouton de l'éditeur, choisir un des langages proposés et coller votre code dans la zone prévue. Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: xml;">Votre code ici</pre>.

Liens conseillés

• Règles générales du forum

---

Bonjour,

NNka a écrit:

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...)

Dans la CSS du  thème enfant que vous devez créer.

Ne remplacer  pas un élément HTML qui a du sens sémantique (<figure>) par un élément qui n'a aucun sens sémantique (<div>).

-
Edité par AbcAbc6 9 février 2020 à 15:13:03

Merci pour le tuyau.

J'ai écrit le code html suivant, mais ça ne fonctionne pas. J'ai un sens interdit qui s'affiche sur mon image.

<!-- 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 class=fond-image"><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 -->

Comment faire ? Je ne dois pas placer le "fond-image" au bon endroit.

Effectivement la class n'est pas au bon endroit, est-ce que vous comprenez le code que vous avez transmit?

la class fond_image est parente de la balise <img> donc ce n'est pas sur celle-ci qui faut l'appliquer mais sur le parent.

  <"img class=fond-image">  cela n'existe pas, c'est

<img class="nomDeLaClass" src="URLDuFichierImage" alt="Description de l'image" /> 

Essayez :

<figure class="wp-block-image size-large fond_image">

-
Edité par AbcAbc6 9 février 2020 à 18:33:22

D'accord. Merci.

Bonjour,

Sujet résolu

Tu peux passer le sujet à "résolu" (bouton en haut à droite du sujet) et cliquer sur les pouces levés des messages qui t'ont aidé⋅e