Cambio de imagenes con efecto hacia arriba

[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.