Problème à la fermeture de mon Infobulle

[Chouchounette]

Bonjour à vous,

Je travaille actuellement sur le design de mon forum et plus précisément sur la PA.

J'ai en effet installé un effet d'infobulle uniquement en CSS ( tuto trouvé sur NU) sur mes prédéfinis.
Celui-ci fonctionne très bien MAIS à la fermeture le contenu de l'infobulle est... disons hideux ?
Petite précision : cela le fait sous Chrome, IE, portable etc...

Voici des captures d'écran pour mieux vous montrer.

A l'ouverture:

A la fermeture:

Et pour que ceux qui auront la gentillesse de bien vouloir se pencher sur mon problème aient toutes les données en main voici mes codes

css:

Partie HTML:

Et pour voir l'effet en live c'est par ICI


Merci à vous de m'avoir lue && à ceux qui voudront bien m'éclairer !
Et bonne journée à tous !

[MlleAlys]

Bonjour,
Le soucis vient du fait que vous avez précisé cette mise en forme dans la partie "au survol".
Faites toute la mise en forme de la bulle pour l'élément normal, et n'indiquez dans l'élément hover que ce qui doit changer (ici la taille principalement) :

Html (il manque un </div> à la fin, à moins que vous ne l'ayez juste oublié lors du copier/coller, et j'ai retiré le span qui a priori ne sert à rien) :

Code:

<div class="transition-NU">
  <img style="width: 50px; height: 50px;" alt="" src="https://www.pixenli.com/images/1491/1491343963066097200.png" />
  <div class="NU_transition">
    <h3>Mon joli titre </h3>
    Ici les infos qui s'afficheront au survol de l’icône.
    <br /> <a href="#profil">Profil</a> <a href="#mp">MP</a>
  </div>
</div>


css :

Code:

/* BLOC CONTENANT L'INFOBULLE - L’ICÔNE */
.transition-NU {
  position: relative;
  width: 50px;
  float: left;
  margin: 10px;
  padding: 0;
}

/* IMAGE (icône) */
.transition-NU img {
  -webkit-transition: all 1s linear 0s; /* pour navigateur webkit */
  -moz-transition: all 1s linear 0s; /* pour navigateur mozilla */
  -o-transition: all 1s linear 0s; /* pour navigateur opera */
  transition: all 1s linear 0s; /* pour les navigateurs récents */
}

/* INFOBULLE */
.NU_transition {
  width: 0;
  height: 0;
  overflow: auto;
  position: absolute;
  bottom: 100px;
  top: 0;
  z-index: 999;
  background: #C6CFD9;
  border: 0px solid #fffae7;
  border-width: 0px;
  padding: 0;
  text-align: justify;
  font-size: 12px;
  color: #216882;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -webkit-transition: all 0.8s ease-in 0.2s;  /* pour navigateur webkit */
  -moz-transition: all 0.8s ease-in 0.2s;  /* pour navigateur mozilla */
  -o-transition: all 0.8s ease-in 0.2s;  /* pour navigateur opera */
  transition: all 0.8s ease-in 0.2s;  /* pour les navigateurs récents */
}


/* IMAGE (icône) AU SURVOL */
.transition-NU:hover img {
  -webkit-transition: rotate(-360deg); /* pour navigateur webkit */
  -moz-transform: rotate(-360deg); /* pour navigateur mozilla */
  -o-transform: rotate(-360deg); /* pour navigateur opera */
  transform: rotate(-360deg); /* pour les navigateurs récents */
}

/* INFOBULLE AU SURVOL */
.transition-NU:hover .NU_transition {
  height: 100px;
  width: 150px;
  padding: 3px;
  border-width: 3px;
}


[Chouchounette]

Oh merci infiniment pour cette réponse rapide et qui plus est parfaite !
Tout ceci est nickel je passe donc mon problème en résolu immédiatement !
<i> Effectivement j'avais oublié une <div> en copiant collant.

Encore une fois merci à vous && excellente fin de journée ! <3