Fotos de antes y después que cambian con el ratón

Y como quiero que el cambio os impacte, en lugar una foto del antes arriba y otra del después debajo, lo hago así: 

¿Veis que guay cuando ponemos el ratón encima de la foto, y luego lo sacamos fuera de la foto? Es genial. 

Me encanta este efecto para todo: 

♦ Reformas de decoración

♦ Decorado de fiestas

♦ Bricolaje

♦ Maquillaje

♦ Dietas

♦ Etc.

Incluso para manualidades, en plan... foto de los materiales y foto de aquello que hayamos hecho acabado; o para comida, con foto bien presentadito y luego una vez que quedan las miguitas jeje. 

En fin, para cualquier cosa que tenga un antes y un después, como el comedor de Jen:

Es muy fácil de hacer.

Básicamente, lo único que debemos tener en cuenta es que:

1) Las fotos las vamos a usar en tamaño original, por lo que no deberían ser más anchas que nuestra columna central (si ponemos de 640 de ancho como mucho, sabemos que acertamos, que es la medida para fotos Extra-grande de Blogger).

2) Las dos fotos (la del antes y la del después) es preferible que sean del mismo tamaño para que el efecto quede mejor.

Ahora, cómo conseguir ese efecto en que cambia una imagen de antes a después cuando le pasamos el ratón por encima: 

✎ En cuanto tengamos las fotos, lo único que deberemos hacer es, en donde queramos que se vean en el post, poner en HTML:

<img onmouseout="this.src='URL de mi foto antes'" onmouseover="this.src='URL de mi foto despues'" src="URL de mi foto antes" />

¡Y eso es todo!

- See more at: http://personalizaciondeblogs.blogspot.com.es/2013/04/fotos-de-antes-y-despues-que-cambian.html#sthash.DbT76045.dpuf