Partage
  • Partager sur Facebook
  • Partager sur Twitter

Apparition texte survol image

    19 février 2021 à 20:51:00

    Bonjour à tous, 

    Je sais qu'il y a déjà plein de post similaires sur le web mais aucun d'eux ne me donne un résultat satisfaisant.

    <div class="col-md-4 col-sm-4">
         <img src="images/p-1.png">
    </div><!-- End col-md-4 -->

    J'ai ce texte, et j'aimerais qu'un texte s'affiche au survol de ma souris, non pas avec un simple title="...." mais que l'image devienne un peu opaque afin qu'un texte noir s'insère dessus.

    Par ailleurs, si quelqu'un ayant la réponse pouvait à la fois détaillé le code pour que je puisse le comprendre, je lui en serais fort reconnaissant

    A+ :)

    • Partager sur Facebook
    • Partager sur Twitter
      19 février 2021 à 21:24:15

      Bonsoir, quelque chose comme ceci http://www.frogweb.fr/demos/figure-hover.html ?

      EthanBertho a écrit:

      Par ailleurs, si quelqu'un ayant la réponse pouvait à la fois détaillé le code pour que je puisse le comprendre, je lui en serais fort reconnaissant

      Tu retrouves l'ensemble des balises et définitions => https://developer.mozilla.org/fr/docs/Web/HTML/Element

      tu retrouves l'ensemble des propriétés CSS et définitions => https://developer.mozilla.org/fr/docs/Web/CSS/Reference

      Avec cela tu devais pouvoir t'en sortir. ;)

      Bon dev.

      • Partager sur Facebook
      • Partager sur Twitter
        20 février 2021 à 0:56:48

        Oui c'est tout à fait ce que je veux.

        Cependant, dans toutes les solutions testées y compris celle la, j'obtiens :

        <figure class="figure-hover">
        <div class="col-md-4 col-sm-4">
        <figcaption>
            <img src="images/p-1.png" alt="">
        <p>Mon texte en bas de l'image qui apparait au survol de figure</p>
        </figcaption>
        </div><!-- End col-md-4 -->
        </figure>



        -
        Edité par EthanBertho 20 février 2021 à 0:58:29

        • Partager sur Facebook
        • Partager sur Twitter
          20 février 2021 à 1:07:39

          Bonsoir, <figcaption> c'est la description de l'image, sa légende plus précisément. Donc l ne faut pas mettre l'image dans la légende mais en dehors.

          • Partager sur Facebook
          • Partager sur Twitter
            20 février 2021 à 8:33:53

            À noter d'ailleurs que <figcaption> ne peut être que le premier ou le dernier élément de <figure>, il ne peut pas y avoir d'intermédiaire, comme une div. Il faut corriger ça aussi.
            • Partager sur Facebook
            • Partager sur Twitter

            Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!

              20 février 2021 à 10:21:06

              <div class="col-md-4 col-sm-4">
              <figure class="figure-hover">			
              <img src="images/p-1.png" alt="">
              <figcaption>
              	<p>Mon texte en bas de l'image qui apparait au survol de figure</p>
              </figcaption>
              </figure>
              </div><!-- End col-md-4 -->


              Merci j'ai écouté vos conseils, et c'est presque bon. Cependant la superposition du "blanc" ne fait que la moitié de l'image.. je suppose que c'est le css ? Mais je ne trouve pas où...

              • Partager sur Facebook
              • Partager sur Twitter
                22 février 2021 à 15:52:00

                > je suppose que c'est le css

                Bah peut-être, mais si tu ne le montres pas, on ne peut pas t'aiguiller ;)

                • Partager sur Facebook
                • Partager sur Twitter

                Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!

                  22 février 2021 à 19:39:10

                  .figure-hover {
                    position:relative;
                    width:400px;
                    height:200px;
                    }
                    .figure-hover img {
                    vertical-align: top;
                    }
                    .figure-hover figcaption {
                    position: absolute;
                    bottom: 0;
                    text-align: center;
                    background-color: rgba(208,208,208,0.61);
                    left: 0;
                    right: 0;
                    color: #000000;
                    font-family: arial;
                    overflow: hidden;
                    transition: top 0.5s;
                    top: 300px;
                    }
                    .figure-hover:hover figcaption {
                    transition:top 0.8s;
                    top:0
                    }

                  -
                  Edité par EthanBertho 22 février 2021 à 19:39:32

                  • Partager sur Facebook
                  • Partager sur Twitter
                    22 février 2021 à 20:11:43

                    Et donc tu veux que le blanc translucide prenne toute la hauteur ? Regarde la dernière ligne de ton .figure-hover figcaption, tu devrais comprendre.
                    • Partager sur Facebook
                    • Partager sur Twitter

                    Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!

                      23 février 2021 à 0:27:39

                      Faudrait remplacer top par "full" ( quelque chose de l'equivalent ? )
                      • Partager sur Facebook
                      • Partager sur Twitter
                        23 février 2021 à 9:12:06

                        Non :)

                        En effet, les valeurs de top, right, bottom et left (quand on est en absolu) signifient en quelque sorte la distance d'"accrochage" de l'élément à son parent positionné. Tu as left et right à 0 qui permettent d'avoir un élément en largeur complète, accroché des deux côtés comme un hamac : à ton avis, avec un bottom à 0, quelle valeur de top te permet d'avoir une hauteur complète ?

                        • Partager sur Facebook
                        • Partager sur Twitter

                        Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!

                          23 février 2021 à 14:50:14

                          Je t'aurais dit top : 0px;

                          Cependant, cela ne fonctionne pas. Je présume donc que ma réponse est mauvaise :/

                          • Partager sur Facebook
                          • Partager sur Twitter
                            23 février 2021 à 15:06:48

                            Ah ? Pourtant c'est ce que je voulais te faire trouver. Définis "ça ne fonctionne pas" : tu peux montrer une capture ?
                            • Partager sur Facebook
                            • Partager sur Twitter

                            Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!

                              Il y a environ 21 heures

                              Et pour couronner le tout, en mettant à 0, le déroulement vers le haut n'y est plus :(
                              • Partager sur Facebook
                              • Partager sur Twitter
                                Il y a environ 11 heures

                                Bonsoir, cela fonctionne correctement pour autant que le block parent ( <figure>) aie les mêmes dimension que l'image. Donc indique un width et un height de la dimension de l'image. Ce serra bon.

                                Maintenant le principe d'une class est d'être réutilisable. Si tu as des images de taille variable il ne faut pas fixer la taille du parent. Je changerais le display pour de l'inline-block. Le top: du <figcaption> ne doit plus   avoir une valeur fixe mais relative.

                                PS :  Le paragraphe dans le <figcaption> n'est pas nécessaire, si tu veux un décalage du texte par rapport au bord haut un padding-top ferra le taf.

                                Exemple :

                                <!doctype html>
                                <html lang="fr">
                                    <head>
                                        <meta charset="UTF-8">
                                        <title>Document</title>
                                        <style>
                                            .figure-hover {
                                                position:relative;
                                                display: inline-block;
                                            }
                                            .figure-hover img {
                                                vertical-align: top;
                                            }
                                            .figure-hover figcaption {
                                                position: absolute;
                                                bottom: 0;
                                                text-align: center;
                                                background-color: rgba(208,208,208,0.61);
                                                left: 0;
                                                right: 0;
                                                color: #000000;
                                                font-family: arial;
                                                overflow: hidden;
                                                transition: top 0.5s;
                                                top: 100%;
                                            }
                                            .figure-hover:hover figcaption {
                                                transition:top 0.8s;
                                                top:0
                                            }
                                
                                
                                        </style>
                                    </head>
                                    <body>
                                        <div class="col-md-4 col-sm-4">
                                            <figure class="figure-hover">        
                                                <img src="https://picsum.photos/600/300" alt="">
                                                <figcaption>
                                                     Mon texte en bas de l'image qui apparait au survol de figure 
                                                </figcaption>
                                            </figure>
                                            <figure class="figure-hover">        
                                                <img src="https://picsum.photos/200/500" alt="">
                                                <figcaption>
                                                     Mon texte en bas de l'image qui apparait au survol de figure 
                                                </figcaption>
                                            </figure>
                                            <figure class="figure-hover">        
                                                <img src="https://picsum.photos/500/250" alt="">
                                                <figcaption>
                                                     Mon texte en bas de l'image qui apparait au survol de figure  
                                                </figcaption>
                                            </figure>
                                        </div><!-- End col-md-4 -->
                                    </body>
                                </html>



                                • Partager sur Facebook
                                • Partager sur Twitter
                                  Il y a environ 7 heures

                                  J'ai essayé avec la taille et cela ne fonctionne pas :( 

                                  Du coup avec le code que tu m'as mis je n'ai plus à adapter la taille dans le css ?

                                  • Partager sur Facebook
                                  • Partager sur Twitter
                                    Il y a environ 1 heure

                                    EthanBertho a écrit:

                                    Du coup avec le code que tu m'as mis je n'ai plus à adapter la taille dans le css ?

                                    C'est cela oui, d’où l'exemple avec différentes tailles d'images. 

                                    -
                                    Edité par AbcAbc6 il y a environ 1 heure

                                    • Partager sur Facebook
                                    • Partager sur Twitter

                                    Apparition texte survol image

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