[isotope.js] faire apparaître une div avec un hover

Bonjour,

pour mon projet web en cours, j'utilise isotope et ce script ajoute des feuilles de style directement dans le DOM html qui me dérange dans la mise en forme du projet final.

voici mon code html qui permet à isotope de fonctionner :

<div class="grid">
  <div class="grid-sizer"></div>
	<a href="accueil.html">
		<div class="element-item grid-item parfumerie">
			<img src="img/image.jpg" alt="image" />
			<div class="hover-desc">
				<p>titre</p>
				<p>action</p>
				<p>lieu</p>
				<p>nom</p>
			</div>
		</div>
	</a>

voici le code css pour mettre en forme la grille isotope :

/* ---- grid ---- */

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .element-item ---- */

/* 5 columns, percentage width */
.grid-item,
.grid-sizer {
  width: 20%;
}

.grid-item {
  float: left;
  height: auto;
}

l'idée est de faire apparaître une div (<div class="hover-desc">) qui au survol de la souris englobe entièrement l'autre div (<div class="element-item grid-item parfumerie">).

dans un premier temps j'ai essayer de mettre la div parente (<div class="element-item grid-item parfumerie">) en position relative et la div enfante (<div class="hover-desc">) en position absolute, mais ça ne fonctionne pas. le script isotope.js ajoute dans le DOM html le style suivant :

    position: absolute;
    left: 19.9685%;
    top: 0px;

du coup me voilà bien embêter comment faire en sorte que ma div enfante englobe 100% de ma div parente sachant que cette div parente est en position absolute. je ne vois pas du tout comment m'y prendre

je fais appel à la communauté

merci d'avance

Hello,

Même si Isotope ajoute une feuille de style, tu peux quand même styler et ajouter des choses sur le hover de ton .grid-item... Pourquoi vouloir absolument cibler l'élément enfant ?