.autour_avatar
{
  width: 200px; /* Mettre la largeur de votre avatar */
  height: 400px; /* Mettre la hauteur de votre avatar */
  overflow: hidden; /* Permet de cacher ce qui dépassera de la div */
  position: relative;
  top: 0;
  left: 0;
}
.avatar_image
{
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.avatar_infos
{
  background-color: #ffffff;
  position: absolute;
  top: 0;
  left: 0;
  width: 96%;
  padding-left: 2%;
  padding-right: 2%;
  height: 100%;
  z-index: 100; /* Ne pas modifier */
  opacity: 0; /* Pour un effet d'apparition progressive. Si on veut juste un coulissement, mettre 100 à l'opacité. */
  margin-top: 400px; /* La marge extérieure haute doit être de la même taille que la hauteur de l'avatar. Cela permet de placer cette div juste au-dessous de l'avatar. */
  -webkit-transition: all 0.8s;
  -moz-transition: all 0.8s;
  -o-transition: all 0.8s;
  -ms-transition: all 0.8s;
  transition: all 0.8s;
}

.autour_avatar:hover > .avatar_infos
{
  /* Si vous avez mis l'opacité à 100 pour avoir simplement un effet coulissant, supprimez les 4 lignes ci-dessous. */
  filter: alpha(opacity=85);
  -moz-opacity: 0.85;
  -khtml-opacity: 0.85;
  opacity: 0.85;
  margin-top: 0px; /* Ne pas modifier. Cela permet de supprimer la marge au-dessus de la div et ainsi, elle ira se placer sur l'avatar ! */
}

<div class="autour_avatar"><div class="avatar_image" style="background-image:url(http://images.doctissimo.fr/1/divers/images-chipie/photo/hd/3684761368/356005938f/images-chipie-ange-dechu-big.jpg);"></div><div class="avatar_infos">Voili, voilou.</div></div>