Jquery: Masquer et afficher une div lorsque l'image est survolée

Question

Je me demande si quelqu'un peut m'aider à trouver une solution pour un effet de survol sur une image dans mon blog. L'idée était que lorsque je survole une image, vous voyez une div avec les informations de l'image, le nom du projet, la date,...

Ce que j'ai fait, c'est attribuer deux classes à la div d'information, la classe show et la classe hide, et au début elle apparaît avec une classe hide.

Puis avec jQuery/JavaScript, lorsque le img:hover retire la classe hide et ajoute la classe show.

le problème est que lorsque je survole une image, les informations de toutes les images apparaissent.

Je me demande si quelqu'un peut m'aider à faire apparaître uniquement les informations de l'image sur laquelle la souris est en survol.

Mon HTML:

      Titre
      Lorem Ipsun
      En savoir plus

      Titre
      Lorem Ipsun
      En savoir plus

Mon CSS:

body div.information {
background: rgba(219, 49, 49, 0.52);
width: 220px;
height: 290px;
position: relative;
top: -290px;
}

/* EFFET DE SURVOL */

.hide {
display: none;
}

.show {
display: block;
}

Mon JavaScript:

$('img').hover(function() {
    $('.information').addClass("mostrar");
    $('.information').removeClass("hide");      
});

Et au fait, si quelqu'un peut me dire comment cacher à nouveau les informations lorsque l'image n'est plus survolée, je vous en serais reconnaissant.

Answer 1

Essaye ça

$('img').hover(function() {
    $('.information').addClass("hide")
    $(this).next().addClass("mostrar").removeClass("hide");
}, function(){
    $('.information').addClass("hide").removeClass("mostrar")
});