Bonjour,

J'ai veux afficher une div avec une background-color par dessus une div qui a une background image.

J'utilise un padding-top pour garder le ratio de la box.

la div à l'hover ne fait pas la meme taille et se décale.

merci de vos conseils

https://codepen.io/murdokland/pen/OBjVgy

-
Edité par FabienGravier 12 octobre 2018 à 12:52:15

Dans ta div hover tu as un h3 en +.

Donc il fait la hauteur d'un h3 en + que la div de base.

Du coup tu peux enlever la hauteur du h3 à ton padding

.SVE_hover {
  background-color: red !important;
  flex-flow: column;
  padding-top: calc(34.25% - 2.17em);
}

https://codepen.io/anon/pen/YJxwRO

Edit: en fait il y a un h1 vs h2 + h3, à toi de calculer pour avoir la même hauteur.

Tu as les dimensions sur la doc ici

-
Edité par Delboar 12 octobre 2018 à 13:35:14

merci mais vu que le contenu de texte peut varier en quantité et donc en hauteur?

Salut,

Tu te prends la tête pour pas grand chose là. T'as pas besoin de toutes ces complications, ni de JS pour ça. 

Positionne ton cadre en tant que référence, puis tes éléments internes par rapport à lui. Et gère tout simplement l'affichage/masquage du contenu au hover.

https://codepen.io/anon/pen/gBxRQX 

-
Edité par EmmanuelBeziat 12 octobre 2018 à 18:08:48

Bonjour FabienGravier ,

Peut on changer ton code HTML , ou il doit avoir exactement cette structure ?

SVE_premier=>[wpv-post-title]  a t il la même valeur que SVE_hover=>[wpv-post-title]

rhooManu a écrit:

Salut,

Tu te prends la tête pour pas grand chose là. T'as pas besoin de toutes ces complications, ni de JS pour ça. 

Positionne ton cadre en tant que référence, puis tes éléments internes par rapport à lui. Et gère tout simplement l'affichage/masquage du contenu au hover.

https://codepen.io/anon/pen/gBxRQX 

-
Edité par rhooManu 12 octobre 2018 à 18:08:48

Super ! merci beaucoup je ne connaissais pas ce fonctionnement de hover en css, c'est top.

J'en ai profité pour rajouter une petite div avec une ligne qui s'anime

.SVEContainer:hover .line {
	-webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

.line {
  	margin-left: auto;
    margin-right: auto;
	height: 2px;
    border-top: 1px solid #000;
  	display: block;
    position: relative;
    top: 1px;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    width: 50%;
    text-align:center;
    
}

Mais je ne comprends pas pourquoi celle-ci varie en largeur en fonction du texte, as-tu une petite idée? merci beaucoup

-
Edité par FabienGravier 15 octobre 2018 à 15:13:35

Bonjour FabienGravier ,

SVE_premier=>[wpv-post-title]  a t il la même valeur que SVE_hover=>[wpv-post-title]

car à mon avis on peut encore simplifier

AliasDmc a écrit:

Bonjour FabienGravier ,

SVE_premier=>[wpv-post-title]  a t il la même valeur que SVE_hover=>[wpv-post-title]

car à mon avis on peut encore simplifier

Bonjour,

oui c'est le meme mais il ne sera pas disposé pareil sur la page