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.