Ver Mensaje Individual
  #15 (permalink)  
Antiguo 13/05/2013, 18:45
Avatar de pzin
pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 4 meses
Puntos: 2114
Respuesta: codigo CSS slider

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
  1. .montage-block > span {
  2.   position: absolute;
  3.   top: 0;
  4.   left: 0;
  5.   bottom: 0;
  6.   right: 0;
  7.   background-repeat: no-repeat;
  8.   -webkit-transition: top .7s ease-in-out;
  9.   -moz-transition: top .7s ease-in-out;
  10.   -o-transition: top .7s ease-in-out;
  11.   transition: top .7s ease-in-out;
  12. }
  13.  
  14.   span#block1 { background-image: url("../images/picture1.jpg"); }
  15.   span#block2 { background-image: url("../images/picture2.jpg"); }
  16.   span#block3 { background-image: url("../images/picture3.jpg"); }
  17.  
  18. .montage-block:hover > span {
  19.   top: -215px;
  20. }

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.