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

Hoy os traigo un tutorial que creo que os va a gustar mucho. 

Bueno tutorial, por decir algo, porque en realidad vais a ver lo sencillísimo que es de hacer. 

Imaginemos que tengo tanto arte decorando como Layla y Kevin, de The Lettered Cottage, y he reformado mi cocina. 

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!

Pero por fa, por fa, por fa... no me preguntéis de dónde sacáis la URL de vuestra foto... que no me da la vida para contestar emails o comentarios.

Ya os comenté además que a partir de ahora iba a partir de la base de que sabéis todo aquello que vemos en el Curso Uno y en el Curso Dos.

Si alguna está interesada en comprar alguno de los dos (o los dos ;) aquí podéis comprar el Curso Uno, y aquí podéis comprar el Curso Dos. 

Por supuesto no hace falta que los compréis, pero a partir de ahora los tutoriales serán menos detallados, por eso, porque doy por supuesto que ya sabéis lo que hemos ido viendo hasta ahora, tanto en los cursos, como en otros tutoriales blogger que he publicado aquí en el blog. 

¡Espero que os haya gustado y que le saquéis partido!

¡A mi me parece divertidísimo!

Estas últimas fotos son de Young House Love (de su antigua casa). 

Besitos y ¡hasta mañana!