Cita:
Iniciado por pzin 
El problema es que no tienes definido un valor
top como inicio. Añádeselo a #block1, #block2 y #block3. O...
Si quieres que te quede más curioso, por si algún día le cambias las medidas y no tener que volver a cambiarlas, y también para no tener que volver a repetir las mismos atributos y valores para cada una de los elementos, podrías simplificar tu código a algo así:
Código CSS:
Ver original.montage-block > span {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-repeat: no-repeat;
-webkit-transition: top .7s ease-in-out;
-moz-transition: top .7s ease-in-out;
-o-transition: top .7s ease-in-out;
transition: top .7s ease-in-out;
}
span#block1 { background-image: url("../images/picture1.jpg"); }
span#block2 { background-image: url("../images/picture2.jpg"); }
span#block3 { background-image: url("../images/picture3.jpg"); }
.montage-block:hover > span {
top: -215px;
}
Así si quieres cambiar algo, no tienes que volver a cambiarlo en tres sitios distintos. Además de que te queda un código más reducido y curioso.
Luego tampoco tienes que especificar ningún ancho o alto, ya que tomará el ancho que tenga el elemento padre.
Muchísimas gracias pzin,
Lo que he hecho de momento es incluir una posición top de inicio como de indicabas. Tú código me parece lo correcto, pero no me funciona los link a cada nombre que aparece en el fondo.
Gracias nuevamente.