[RÉGLÉ] Empiller 2 div l'une sur l'autre

[Visiteur]

Salut

Je personnalise l'affichage blog d'un site et je bloque sur un truc. J'ai 2 DIV que je voudrais empiler l'une sur l'autre, car je voudrais en faire disparaitre une et au hover qu'elle réapparaisse pendant que l'autre disparait. Pour les articles j'utilise les champs personnalisables et pour le placement du flex.

<div class="actu-block-img-txt">
    <div class="actu-img">
        {field 5}
    </div>

    <div class="actu-intro">
        {field 6}
    </div>
</div>

<hr id="system-readmore" />

<div class="actu-article">
    {field 3}
</div>

Pour pouvoir faire ce que je veux j'ai mis une hauteur fixe a .actu-block-img-txt et un margin-top négatif à .actu-intro :

.blog article.item {
    display:flex;
    flex-direction: column;
}

.blog article .entry-header {order:-1;}

.blog-h2 {order:1;}

.actu-block-img-txt {order:2;}

.readmore {order:3;}

.actu-block-img-txt {height:260px;}

Mais bon, pas très pratique, car j'aimerais centrer verticalement .actu-intro par rapport à .actu-img. J'avais pensé a mettre .actu-img en position:absolute mais ça m’empêche de centrer mon image horizontalement.

Edit : 2 petites précisions. Pour l'image c'est une balise img dans une balise figure. Quant je parle d’empiler c'est comme si je mettais une image dans le background d'une DIV et le texte dans la DIV. Sauf que dans mon cas l'image sera différente pour chaque article (c'est l'image d'intro).

[lefabdu51]

pour center une div verticalement en css: vertical-align, mais elle n est pas forcement précise.
Le mieux serait de faire cela en javascript ou en jquery.......

[Visiteur]

Pour le centrage vertical, comme j'utilise flex pas de souci, c'est juste pour l’empilage des 2 div. Mais merci quant même

[papounet]

Bonjour nenex,

La solution est simple. Mais dans ton code il y a 3 div donc pour aider correctement , merci de nous indiquer le div qui doit être remplacé, ainsi que celui qui doit s'afficher à la place.

Parce que si c'est le div.actu-article qui doit remplacer le div.actu-block-img-txt, ce n'est pas la même chose que de remplacer actu-image par actu-intro.

Papounet

[Visiteur]

C'est actu-intro qui remplace actu-img au hover. Je sais pas si pour ta solution c'est utile de la savoir, mais je pense que le .actu-block-img-txt je vais le virer.

[Visiteur]

Pour que ça soit beaucoup plus parlant que mes explications, voila un exemple de ce que je voudrais faire et du resultat final.

Je pensais qu'en mettant .actu-img et .actu-intro en position:relative et en les alignant avec align-self:center; ça pouvait le faire et en fait non.

[papounet]

Hello,

il faut utiliser :hover sur .actu-block-img-txt ou .actu-img pour afficher le actu-intro. C'est ce que tu demande dans ton 1er post.
Ensuite il faut utiliser z-index comme expliquer ici (https://developer.mozilla.org/fr/doc...ndex/Exemple_1)

Bref, c'est que du css à ajouter dans la feuille de style de ton template :

.actu-block-img-txt { position: relative;}
.actu-img {position: absolute; display:block; z-index:1;}
.actu-intro {position: absolute; display:none; zindex:2; top:50%;}
.actu-img: hover .actu-intro {display:block;}

Le top:50% devrait centrer l'image verticalement.


Papounet

[Visiteur]

Je demandais pas pour le hover, ça je sais le faire. Si j'en ai parlé dans mon 1° post c’était juste pour dire le but final. Ce que je demandais c'est comment empiler 2 éléments. En fait pas besoin que j'utilise grid mais block et je doit jouer avec les position:relative et position:absolute. Merci pour ces précisions.