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 !