Superponer dos imágenes con efecto deslizante.

Añadiremos una imágen en el blog de tal forma que al posicionar el ratón sobre la misma se coloque una segunda encima, todo esto realizado con un efecto deslizante:

Como lo lógico es que la queramos poner en lugares puntuales como una entrada o un gadget html  ahí insertaremos el siguiente código:
<div class="pulloutimage">
<img class="original" src="url imagen original" style="height: 199px; width: 263px;"  />
<img class="ondemand" src="url imagen secundaria" style="height: 199px; width: 263px;" width:="" /> </div>

<style>
.pulloutimage{
position: relative;
}

.pulloutimage img{
position: absolute;
left: 0;
/*estilos para el borde de la primera imagen */
}

.pulloutimage img.ondemand{
opacity: 0;
visibility: hidden; /* hide it initially (mainly for legacy browsers)
}

.pulloutimage img.original{
z-index: 1; /* set base z-index of initially shown image */
}

@-webkit-keyframes revealfromright{
0%{ /* animación */
z-index: -1;
opacity: 0;
}
50%{
opacity: 1;
z-index: -1;
left: 100%;
box-shadow: none;
}
51%{
z-index: 2;
}
100%{
left: 0;
box-shadow: 8px 8px 15px gray;
}
}

@-moz-keyframes revealfromright{
0%{
z-index:-1;
opacity:0;
}
50%{
opacity:1;
z-index:-1;
left:100%;
box-shadow: none;
}
51%{
z-index:2;
}
100%{
left:0;
box-shadow: 8px 8px 15px gray;
}
}

@-ms-keyframes revealfromright{
0%{
z-index:-1;
opacity:0;
}
50%{
opacity:1;
z-index:-1;
left:100%;
box-shadow: none;
}
51%{
z-index:2;
}
100%{
left:0;
box-shadow: 8px 8px 15px gray;
}
}

.pulloutimage:hover img.ondemand{
-webkit-animation-name:revealfromright;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;

-moz-animation-name:revealfromright;
-moz-animation-duration: 1s;
-moz-animation-iteration-count: 1;

-ms-animation-name:revealfromright;
-ms-animation-duration: 1s;
-ms-animation-iteration-count: 1;

animation-name:revealfromright;
animation-duration: 1s;
animation-iteration-count: 1;

visibility:visible;
opacity:1;
box-shadow: 8px 8px 15px gray;/* esto es la sombra */
z-index:2;
/* estilos para el borde de la segunda imagen */
}

.pulloutimage:hover img.original{
opacity:0.5;
}
</style>

Sustituir lo que está en rojo por la url de las imágenes y lo que está en azul correspondera a la altura y anchura de cada una de ellas.