Cita:
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 ;)