Partage
  • Partager sur Facebook
  • Partager sur Twitter

Foncer une image au passage de la souris / HTML

Problème avec html

Sujet résolu
    9 février 2020 à 15:00:20

    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 :)
    • Partager sur Facebook
    • Partager sur Twitter
      Staff 9 février 2020 à 15:11:43

      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 Code 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


      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

      • Partager sur Facebook
      • Partager sur Twitter
        9 février 2020 à 18:15:28

        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.
        • Partager sur Facebook
        • Partager sur Twitter
          Staff 9 février 2020 à 18:32:56

          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

          • Partager sur Facebook
          • Partager sur Twitter
            Staff 11 février 2020 à 16:24:33

            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 ;)
            • Partager sur Facebook
            • Partager sur Twitter

            Foncer une image au passage de la souris / HTML

            × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
            • Editeur
            • Markdown