Un hover sur un carrousel

Bonjour à vous,

Je viens pour vous demander de l'aide pour avancer dans mon petit projet de confection d'un portfolio.

Je vous explique mon problème, en fait j'ai un carrousel simple avec deux images et dessus j'ai un hover qui un paragraphe dédié par image. Comme montré dans le code html suivant :

<div id="carousel">
          <div class="box">
            <div class="slid-img">
              <img class="active" src="./assets/img/affiche-sae.jpg" alt="Portfolio infographie"/>
              <div class="overlay">
                <p class="text">
                  Quam ob rem ut ii qui superiores sunt submittere se debent in
                  amicitia, sic quodam modo inferiores extollere. Sunt enim
                  quidam qui molestas amicitias faciunt, cum ipsi se contemni
                  putant; quod non fere contingit nisi iis qui etiam
                  contemnendos se arbitrantur; qui hac opinione non modo verbis
                  sed etiam opere levandi sunt.
                </p>
              </div>
              <div class="slid-img">
                <img src="./assets/img/carnaval-final.jpg" alt="Portfolio infographie">
      
                <div class="overlay">
                  <p class="text">
                    Quamo ddob rem ut ii qui superiores sunt submittere se debent in
                    amicitia, sic quodam modo inferiores extollere. Sunt enim
                    quidam qui molestas amicitias faciunt, cum ipsi se contemni
                    putant; quod non fere contingit nisi iis qui etiam
                    contemnendos se arbitrantur; qui hac opinione non modo verbis
                    sed etiam opere levandi sunt.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>

Puis pour l'hover voici le CSS :

.overlay {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    height: 100%;
    background-color: rgba(51, 50, 50, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
}
.overlay p {
    color: white;
    font-weight: 500;
    letter-spacing: 0.05rem;
    line-height: 1.5rem;
    text-align: center;
    padding: 0.5em;
}

.overlay {
    visibility: hidden;
}

.slid-img:hover .overlay {
    visibility: visible;
}

Donc le problème est quand je passe avec ma souris je voudrais que la paragraphe dédié à l'une des deux images apparaisse et que l'autre disparaisse et inversement. J'ai essayé de passé par JS, mais rien de fonctionne malheureusement. Avez-vous idée comment je pourrais faire faire ?

Merci de vos réponses d'avance !

Bonjour,

1) Une balise fermante </div> dans ton html pour le premier div.slid-img était placée à la fin (après la balise fermante du deuxième div.slid-img) ce qui perturbait pas mal l'affichage. Si ça se trouve, c'était simplement ça qui t'empêchait d'obtenir ce que tu voulais.

2) On peut utilement ajouter un position:relative à div.slid-img.

3) Ça me semble plus simple d'utiliser display:none et display:block pour cacher et afficher l'overlay (moins d'effet de bord).

EDIT: c'est bien aussi d'ajouter pointer-events: none; à .overlay dans le css.

Exemple : https://jsfiddle.net/parsimonhi/xsgmfjke/

Amicalement,
Modifié par parsimonhi (14 Feb 2022 - 21:45)

parsimonhi a écrit :
Bonjour,

1) Une balise fermante &lt;/div&gt; dans ton html pour le premier div.slid-img était placée à la fin (après la balise fermante du deuxième div.slid-img) ce qui perturbait pas mal l'affichage. Si ça se trouve, c'était simplement ça qui t'empêchait d'obtenir ce que tu voulais.

2) On peut utilement ajouter un position:relative à div.slid-img.

3) Ça me semble plus simple d'utiliser display:none et display:block pour cacher et afficher l'overlay (moins d'effet de bord).

EDIT: c'est bien aussi d'ajouter pointer-events: none; à .overlay dans le css.

Exemple : https://jsfiddle.net/parsimonhi/xsgmfjke/

Amicalement,

Merci de ton aide, ça fonctionne parfaitement maintenant !