Partage
  • Partager sur Facebook
  • Partager sur Twitter

effet transition centrer img verticalement

Sujet résolu
    17 mars 2019 à 12:19:02

    Bonjour, 

    je souhaite centrer les images de mes balises <figure> dans une <div id="book">.

    #book {
        padding-top: 6%;
        text-align: center;
    
    }

    En mettant une height fixe j'obtiens des <figure> fixes qui ne bougent pas quand on survole l'image mais l'image est fixée en haut.

    figure {
        display: inline-block;
        vertical-align: middle;
        margin: 1em 0;
        height: 490px;
        width: 390px;
    }
    
    figcaption {
        color: rgba(255,255,255,.7);
        font-style: italic;
        text-align: center;
    }
    
    img {
        max-height: 400px;
        box-shadow: 2px 2px 5px rgba(0,0,0,.4);
        transition: all 1s ease; 
    }
    
    img:hover { 
        max-height: 460px; 
        cursor: pointer;
    }




    En enlevant cette height, j'obtiens ce que je veux mais toutes les <figure> se décalent au survol. 

    figure {
        display: inline-block;
        vertical-align: middle;
        margin: 1em;
    
    }
    
    figcaption {
        color: rgba(255,255,255,.7);
        font-style: italic;
        text-align: center;
    }
    
    img {
        max-height: 400px;
        box-shadow: 2px 2px 5px rgba(0,0,0,.4);
        transition: all 1s ease; 
    }
    
    img:hover { 
        max-height: 460px; 
        cursor: pointer;
    }



    Je souhaite que seule l'image survolée soit modifiée en taille et reste centrée. 

    Les autres éléments ne doivent pas bouger.

    Merci de vos conseils... :)

    Lien vers le site

    -
    Edité par lapin2jade 17 mars 2019 à 12:38:06

    • Partager sur Facebook
    • Partager sur Twitter
      18 mars 2019 à 11:38:50

      Bonjour,

      essaye les flexbox pour garder ton imager centrer verticalement et horizontalement.

      figure{
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
      }

      Pour apprendre flexbox rapidement : https://flexboxfroggy.com/#fr

      • Partager sur Facebook
      • Partager sur Twitter
        18 mars 2019 à 18:02:11

        Merci @Charbon pour cette astuce que je ne connaissais pas.

        Ça donne le résultat voulu, hélas avec display: flex, ma grille d'images devient une colonne d'items verticale centrée à gauche!

        Et si je mets display: inline-flex, je récupère l'alignement, mais du coup ça ne fonctionne plus: tous les éléments descendent avec le zoom... 

        j'ai essayé de triturer un peu le code en me familiarisant avec la notion, mais rien n'a marché pour l'instant. 

        -
        Edité par lapin2jade 18 mars 2019 à 18:55:18

        • Partager sur Facebook
        • Partager sur Twitter
          19 mars 2019 à 10:28:45

          Alors déjà je te conseille de mettre tes trois boutons du menu dans une DIV pour commencer ce sera bien mieux pour travailler sur la mise en page.

          Le HTML

          <div id="header">
              <button class="tablink" onclick="openPage('book', this, 'rgba(70,70,70,1)')" id="defaultOpen" style="background-color: rgb(70, 70, 70);">Book</button>
              <button class="tablink" onclick="openPage('about', this, 'rgba(70,70,70,1)')">À propos</button>
              <button class="tablink" onclick="openPage('contact', this, 'rgba(70,70,70,1)')">Contact</button>
          </div>

          Puis pour le CSS on utilise aussi les FlexBox

          #header{
              display: flex;
          }
          .tablink {
              background-color: rgba(60,60,60,1);
              border: none;
              padding: .8em;
              font-size: 17px;
              flex: 1;
          }

          Le id="header" est en display: flex;, cela permet de travailler avec les enfants de id="header".

          flex: 1; pour les enfants de id="header" équivaut à ton width: 33.3%;, chacun des enfants se partagera la place disponible pour le coup.

          • Partager sur Facebook
          • Partager sur Twitter
            19 mars 2019 à 11:31:58

            Ok, j'ai mis une balise <header> ;) puis j'ai ajouté une ligne à #book:

            #book {
                display: flex;
            
            }
            


            Seulement mes <figure> restent empilées verticalement... 

            • Partager sur Facebook
            • Partager sur Twitter
              19 mars 2019 à 11:41:24

              Voilà où j'en suis:

              #book {
                  display: flex;
                  padding-top: 6%;
                  text-align: center;
              }
              
              #about,#contact {
                  padding: 5%;
              }
              
              figure {
                  justify-content: center;
                  align-items: center;
                  flex-direction: row;
                  margin: 1em 0;
                  height: 500px;
                  width: 400px;   
              }

              Ca ne marche pas!



              • Partager sur Facebook
              • Partager sur Twitter
                19 mars 2019 à 11:48:18

                text-align: center; tu l’enlèves puisque que nous allons travailler sur le positionnement avec FlexBox.

                justify-content et flex-direction c'est pour le #book

                • Partager sur Facebook
                • Partager sur Twitter
                  19 mars 2019 à 11:48:23

                  C'est mieux ainsi:

                  figure {
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      flex-direction: column;



                  • Partager sur Facebook
                  • Partager sur Twitter
                    19 mars 2019 à 11:58:10

                    Revient à 0 comme sur ton site et commence par ça

                    <div id="book" class="tabcontent" style="display: block;">

                    à remplacer par ça

                    <div id="book" class="tabcontent" style="display: flex;">



                    • Partager sur Facebook
                    • Partager sur Twitter
                      19 mars 2019 à 12:04:57

                      Je te propose de le faire en live, comme ça tu peux voir ce que ça fait sans capture d'écran ok?

                      Voilà, j'ai remis comme tu dis.

                      • Partager sur Facebook
                      • Partager sur Twitter
                        19 mars 2019 à 12:10:08

                        Tu faisait pas les changements en local? Parce-que moi je voyais aucune modification. En tout cas, voila ce que j'ai moi après avoir mis #book en flex
                        • Partager sur Facebook
                        • Partager sur Twitter
                          19 mars 2019 à 12:14:52

                          Alors pardon car en effet j'avais oublié de changer le code de index.html.

                          C'est fait maintenant. Par contre ça ne change rien... j'ai essayé de mettre le flex sur index comme tu as fait mais c'est idem...

                          • Partager sur Facebook
                          • Partager sur Twitter
                            19 mars 2019 à 12:18:33

                            Conflis, style="" est prioritaire enlève le de la page index.html

                            • Partager sur Facebook
                            • Partager sur Twitter
                              19 mars 2019 à 12:21:09

                              Il n'y est plus. En fait je ne mets jamais de css dans mon html, toujours dans un fichier .css à part.
                              • Partager sur Facebook
                              • Partager sur Twitter
                                19 mars 2019 à 12:27:02

                                Oui je viens trouver aussi!

                                Je vais devoir enlever ça et refaire ma mise en page. 

                                • Partager sur Facebook
                                • Partager sur Twitter
                                  19 mars 2019 à 12:29:16

                                  Utilise jQuery pourquoi pas et moi j'ai l'habitude d'ajouter des class ou d'en enlever au lieu de modifier directement le style.
                                  • Partager sur Facebook
                                  • Partager sur Twitter
                                    19 mars 2019 à 13:46:24

                                    Finalement j'ai enlevé le js, et du coup je suis revenu au point de départ et pas moyen de centrer verticalement ces img dans leur <figure>!

                                    voilà ce qui va le moins mal:

                                    #book {
                                        display: flex;
                                        flex-wrap: wrap;
                                        justify-content: center;
                                        align-items: center;
                                        padding-top: 6%;
                                    }



                                    • Partager sur Facebook
                                    • Partager sur Twitter

                                    effet transition centrer img verticalement

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