27822 sujets

CSS et mise en forme, CSS3

Bonjour,

je souhaite appliquer une css à un plugin pour aligner systématiquement le texte en bas d'un bloc, à genre 50px du bas. Je pense que Flexbox peut répondre à ce besoin mais je n'arrive pas à cibler correctement les éléments pour mettre les bonnes css.

Voici la page : https://www.insight-design.com/en/homepage/
Sous la vidéo, il y a 2 types d'images : des presque carrées et des verticales. Au hover, u overlay s'affiche, réglé à 67% de haut. Le texte est aligné en haut (titre rose + les 2 lignes en dessous). J'ai testé avec un margin top en % mais mon texte est à peu près en bas sur les images carrées mais pas sur les images verticales.
Comment avoir l'alignement systématique en bas ?
Merciiiii pour votre aide.
Salut,

tu cherches donc à avoir le même rendu sur les images "verticales" que sur les images "carrés" ?
Administrateur
Hello,

Si je ne me trompe pas (j'ai testé à l'arrache sur l'inspecteur d'élément), il faut que tu modifies la classe .info lorsque l'on survole le lien dans l'élément .ih-item (j'avoue que le code est vraiment alambiqué Smiley ohwell )

Je pense que ceci fonctionne :


.ih-item.square.effect3 a:hover .info {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
Meilleure solution