Cambio de imagenes con efecto hacia arriba

[andoencombi]

Hola amigos, quisiera hacer un codigo en el cual se haga un cambio de una imagen al hacer hover, pero que el hover hiciera una funcion de que vaya apareciendo la nueva imagen de abajo hacia arriba poco a poco.

Alguien me puede ayudar??

[ZoroRoronoa]

Usa jQuery.
Y de abajo hacia arriba heee?

Buscate acerca de jQuery UI y ese efecto que mencionas, Google tiene muchas letras que mostrarte

slideDown, slideUp o animate, etc... buscale [jQuery UI]

http://jquery-manual.blogspot.com/20...idedown-y.html

o ya que estamos en CSS, puedes usar esas cosas maravillosas de CSS3, como translate y animation
http://davidwalsh.name/background-animation-css

PD: Mi respuesta es solo una Orientacion.

[andoencombi]

La idea es esta, tener un codigo como este:

Código PHP:

  <style>  
#box{ 
    width:180px; 
    height:180px; 
    background: url(Zombatar_7.jpg)no-repeat; 
} 
 
#box:hover { 
    background: url(Zombatar_1.jpg)no-repeat; 
} 
</style> 
 
 
<div id="box"></div>  
   

y una vez que se hace el hover, que la imagen del hover aparezca poco a poco de abajo hacia arriba. Solo con css.

[juangemelo01]

Iniciado por andoencombi

La idea es esta, tener un codigo como este:

Código PHP:

  <style>  
#box{ 
    width:180px; 
    height:180px; 
    background: url(Zombatar_7.jpg)no-repeat; 
} 
 
#box:hover { 
    background: url(Zombatar_1.jpg)no-repeat; 
} 
</style> 
 
<div id="box"></div>  
   

y una vez que se hace el hover, que la imagen del hover aparezca poco a poco de abajo hacia arriba. Solo con css.

Lo que puedes hacer ahi amigo es hacer una imagen con las 2 imagenes (1 arriba de la otra) y en el hover le puedes poner algo asi

Código:

#box:hover {
    background-position: 0 200px;
   transition:all 3s ease; 
        -o-transition:all 3s ease;
        -moz-transition:all 3s ease;
        -webkit-transition:all 3s ease;
}

el 0 es del eje x (como no quieres que se mueva del eje x, por eso lo dejamos en 0)
200px es en el eje Y, suponiendo que cada imagen mide 200px en el eje Y, se movera y se mostrara solo lo que quieres ver ;)

[pzin]

Puedes usar fondos múltiples y hacer una transición de la posición de la segunda imagen.

Código CSS:

#box{ 
  width:180px; 
  height:180px; 
  background:  url(Zombatar_1.jpg)no-repeat,
               url(Zombatar_7.jpg)no-repeat;
  background-position: center 180px, center;
  transition: background 600ms ease-out;
} 
 
#box:hover { 
  background-position: center 0, center;
}
 

Cargar jQuery sólo para esto es una burrada.