Como hacer que un div aparezca debajo de su correspondiente

[pzin]

Pues mira, se te va complicando el asunto.

Estuve haciendo una prueba con todos tus requisitos y no te queda más remedio que añadir otro elemento para centrar ese elemento. Quedaría en algo como esto la estructura:

Código HTML:

<a>
  <img src="fulanito.png">
  <div>
    <span>Nombre Apellido</span>
  </div>
</a>
 

Luego el CSS se complica un poco más:

Código CSS:

a {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 50px;
}
 
a div {
  position: absolute;
  right: 50%;
  bottom: -20px;
  visibility: hidden;
  opacity: 0;
  transition: opacity .4s ease-out, visibility 0 linear .4s
}
 
a div span {
  display: block;
  margin-right: -100%;
  text-align: center;
  white-space: nowrap;
}
 
a:hover div {
  visibility: visible;
  opacity: 1;
  transition-delay: 0;
}
 

Más que complicado, un poco rebuscado. El problema de centrar ese elemento con posición absoluta es cuando se hace más largo que su contenedor, por eso había que meter otro contenedor.

Ya de paso te puse una transición, que tendrás que añadirle los prefijos propietarios o usar prefixfree, Sass o alguna salsa de esas.

Funcionando: http://codepen.io/pzin/pen/dvKht