Partage
  • Partager sur Facebook
  • Partager sur Twitter

[CSS] Image et texte décalés avec le hover

    4 février 2020 à 17:31:50

    Bonjour, j'ai utilisé un bout de code existant et je l'ai bidouillé pour comprendre la fonction hover (je débute en codage). Alors ça marche plus ou moins, le créateur a multiplié les div donc je m'y perds un peu, mais il y a un truc qui ne marche pas comme il faudrait :

    https://codepen.io/Elysyon/pen/gOpYRxm

    Le texte (avant et après) est décalé alors qu'il devrait être centré sur l'image, et je ne comprends pas pourquoi. Vous pouvez m'aider à le rectifier pour que ça soit plus joli? Merci d'avance!

    P.S : au chargement de la page, on voit brièvement le texte "Réponse!" avant qu'il ne disparaisse, c'est normal?

    • Partager sur Facebook
    • Partager sur Twitter
      5 février 2020 à 8:58:34

      Slt, bon déjà dans un premier temps ne mets jamais d'accent pour le nomage de tes class, change le "après" par "apres" par exemple.

      Ensuite pour center ton texte comme il faut dans ta box il y à plusieurs solutions. je vais t'en donner une ajoute dans la class "texte" ceci.

      /* Texte original */
      .overlay .texte {
       color: red;
       font-size: 30px;
        margin-top: 50vh;
        transform: translateY(-50%);
        text-align: center;
      }

      La solution que je t'ai mis est aussi présente dans l'article que je t'es mis.

      Apres si tu veux d'autres solution y en à ici -> https://www.alsacreations.com/tuto/lire/1032-Comment-centrer-verticalement-sur-tous-les-navigateurs-.html

      • Partager sur Facebook
      • Partager sur Twitter
        6 février 2020 à 17:23:43

        Merci de ta réponse et pour ton lien, je viens de tester plusieurs façon de faire et ça m'a aidé à comprendre plusieurs trucs ^^ Le résultat est beaucoup plus propre maintenant!
        • Partager sur Facebook
        • Partager sur Twitter

        [CSS] Image et texte décalés avec le hover

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