10/4/13

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!



Únete a mi newsletter para recibir cada semana un resumen con trucos y recursos

55 comentarios

  1. Ohhh! Qué xaxi! Me gusta! La verdad que es una cosa que nunca he necesitado, pero tendré que probarlo para poner en práctica lo que explicas!

    Hoy vengo pronto que esta semana, por suerte, tengo un trabajito!


    Un beso grande!

    ResponderEliminar
  2. Uuuoooooo que chulo!! me lo apunto!!
    Por cierto, que cambiazo la casa!!
    BSss

    ResponderEliminar
  3. ¡Me encantaaaaaaaaaa! Y yo que tengo justo una seccion en mi blog llamada antes&después....

    ¡Que bieeeeen! Gracias

    ResponderEliminar
  4. Pues mira, no sabía que se podía hacer ese efecto tan chulo con las fotos. Me guardo el truco.

    Besitos y gracias!

    ResponderEliminar
  5. No tenía ni idea de hacerlo, me parece genial! Muchas gracias!!!! :)

    ResponderEliminar
  6. Genial ^_^ pero pensad que en tablets y teléfonos no sirve de nada, y el que os lea desde ellos se queda sin ver el antes / después ;) a no ser que le digáis específicamente que pulse en la foto (en el caso del iPad, por ejemplo, es así)

    Saludos

    ResponderEliminar
    Respuestas
    1. Tienes toda la razón, se me ha olvidado ponerlo, daba por supuesto que todo el mundo ya lo sabía. Hay muchas cosas que no funcionan/se ven desde los dispositivos móviles o de Apple, que van por libre...

      Por eso es siempre recomendable poner más fotos, no solo la del efecto, y que además la primera sea SIN efecto, que si no en las miniaturas (posts más recientes, populares, historias sugeridas, etc.) se verá la foto del antes (o sea, la fea)

      Gracias!

      Eliminar
    2. Nunca hay que dar por supuesto nada ;) en serio!! Llevo más de 20años como informática y aún me sorprendo de cosas que es imposible no dar por supuesto. (Suena lioso pero es así ;)

      Enhorabuena por el blog Blanca.

      Eliminar
    3. Sabéis si con un gift animado pasa lo mismo? Se pierde el efecto en tablets y móviles?
      Mil gracias!!

      Eliminar
    4. No, tranquila ;)

      Eliminar
    5. Gracias Anónimo!!!
      Y gracias Blanca por este pedazo de blog tan utilísimo! Hace casi nada que llegué aquí y esto está empezando a convertirse en mi particular wikipedia del blogging ;)

      Eliminar
  7. OOOOOOOOH!!! que bueno!!! una vez más me has sorprendido blanca!!!

    ResponderEliminar
  8. Es chulisimo, gracias Blanca por compartir. Y me queda la duda siguiente: ¿de donde diantres saca la gente toooooooooda esa luz????
    Yo no la he encotrado nunca :(
    Un beso guapa

    ResponderEliminar
    Respuestas
    1. Es algo de fotografía. Apertura de diafragma me suena. Pero vamos, no me hagas ni caso, porque creo que soy la única persona que NO ha tenido una cámara de fotos en su vida (ni compacta jajaj).

      En blogs de decoración (al ser interiores) tendrás información/trucos sobre ello!

      Besitos guapa :)

      Eliminar
  9. Muy bueno, gracias por compartirlo.

    ResponderEliminar
  10. que chulada.... lo pineo!!!
    GRACIAS!!!!

    ResponderEliminar
  11. Que chulo, mil gracias por compartirlo con todas nosotras. Un beso guapa.

    ResponderEliminar
  12. Increíble!!! Me encantan estos cambios :P
    Genial el post!
    Besosss

    http://rimelycarmin.blogspot.com.es/

    ResponderEliminar
  13. Una alternativa más para tener en cuenta. Gracias!!!

    bss

    ResponderEliminar
  14. Genial,Blanca,no conocía este efecto.Realmente nos muestras cosas muy interesantes y diferentes.Gracias!!

    ResponderEliminar
  15. Gracias Blanca por estos tutoriales =)

    Amparo

    ResponderEliminar
  16. guai! Detallitos que le dan vida y personalidad al blog!

    ResponderEliminar
    Respuestas
    1. Eso es, personalización de blogs ;)

      Me alegro de que os gusten!!

      Mil besos

      B

      Eliminar
  17. ohhh!!! mil gracias!!! después de mi bodorrio haremos reformas y justamente quería hacer un antes y un después y esto es genial!!!

    ResponderEliminar
  18. Me encanta este tutorial! lo pondré en práctica :)

    Besos
    Bea de Bocados Divinos

    ResponderEliminar
  19. Qué tutorial más chulo. Me encanta. Gracias y un besico.

    ResponderEliminar
  20. Me encanta el tutorial, seguro que lo uso alguna vez, es una gran idea, muchas gracias!!

    ResponderEliminar
  21. Mega consejo genial!!! siempre había querido saber como se hacía!!! millones de gracias y un beso enorme

    ResponderEliminar
  22. ¡Qué chulo! Me gusta mucho lo que has propuesto de plato presentado/plato con miguitas. ¡Me parece muy gracioso!
    Besos.

    ResponderEliminar
  23. Muchísimas gracias. Nunca pensé que podía ser tan sencillo.
    Sweet Faery Creations

    ResponderEliminar
  24. Fabuloso tutorial! Estoy deseando ponerlo en práctica! :D
    ¿Aun no conoces mi blog?
    No hay rincones sin color

    ResponderEliminar
  25. Un tutorial genial!! Muchas gracias por enseñarnos tanto!!
    Bes.

    ResponderEliminar
  26. qué bien me encanta el truquillo ^^ ya lo probaré
    Gracias guapa!

    ResponderEliminar
  27. Pero Blanca de dónde sacas tanta información valiosisima y sobre todo, cómo puedes saber tanto de blogs...???? yo me quedo siempre con la boca abierta...

    Por esta información más de una pagaríamos y tú la das gratis...Graciaaaaaas!!!!

    un besito

    ResponderEliminar
  28. Holaaaaa Blanca, ains que llevo un par de días sin comentarte nada, pero te leo a diario, estoy haciendo un curso full time y me queda poco tiempo. Fantástico el post de hoy. Por cierto, he hecho algunos cambios que me aconsejaste en el blog, y he aplicado unas cuantas cosas del curso 2 en el blog, creo que ha quedado cuco, si puedes te pasas y mes das tu opinión. Beso gigante. Yolanda.

    ResponderEliminar
  29. Chuli, chuli esto de las fotos. Thanks!

    ResponderEliminar
  30. Blanca, ¿cómo sabes tanto? Eres grande por compartir tanto con nosotras.

    ResponderEliminar
  31. Uy! Éste me ha encantado (cómo no, jajj). Es una chulada.
    ¡Gracias!

    ResponderEliminar
  32. Que buen tutorial, las cosas con tus palabras parecen faciles ;)

    ResponderEliminar
  33. Me ha encantado!!!!Es genial ver el antes y el después!Gracias por el tutorial!un besito

    ResponderEliminar
  34. Chulísimo Blanca, ya veía yo estos efectos en recetas de cocina y me preguntaba que cómo lo podrían hacer, creía que se haría con photoscape , probaré a hacerlo como tu dices a ver si me sale. Besinos y muchísimas gracias por darnos tantas clases y enseñarnos lo que tu sabes, aunque yo no lo cojo todo.... pero te sigo y me presta muchísimo.

    ResponderEliminar
  35. Blanca seré mas tonta que nadie ,pero no se como se hace.
    Explicas algo parecido en el curso 2 ?

    ResponderEliminar
  36. Muchas gracias. Estaba haciendo un cartelito de "Respeta mi trabajo" y con este efecto queda precioso. Mira, mira...
    Sweet Faery Creations

    ResponderEliminar
  37. Me encanta Blanca, genial. GRACIAS

    ResponderEliminar
  38. Me ha encantado Blanca, todos los efectos visuales tienen mucho impacto. Saludos

    ResponderEliminar
  39. Gracias por el dato!! Pero tengo una duda, ¿en que parte de la HTML lo debo poner? y ¿puedo utilizar este efecto en la barra lateral?

    ResponderEliminar
  40. Queda genial. Y parece super divertido jejejeje ;P
    Gracias.

    ResponderEliminar
  41. Buenas!
    He probado este fantabuloso tutorial y funciona como la seda! Alucinante tu saber!
    Pero tengo un error y es que la foto cambia al pasar el ratón por encima pero no vuelve a la original. Y al pasar el ratón por encima otra vez me hace justo lo contrario que yo quería.
    Creo que lo he arreglado haciendo así:
    img onmouseout="this.src='URL de mi foto antes'" onmouseover="this.src='URL de mi foto antes'" src="URL de mi foto despues" /
    ¿Tiene lógica así? Me he sentido un poco perdida porque no veo ningún comentario con el mismo problema que yo :/, no sé si lo he estado haciendo mal. Desde luego mi código queda al final diferente porque le aplico cambio de tamaño además xD, no sé si es el causante de fallos.

    ¡Un saludo!

    ResponderEliminar
  42. ¡Muchas gracias! Utilicé este tutorial para que cambie mi botón de "Subir", y me ha funcionado a la perfección:3
    Entré a este blog por una cosa y terminé llevándome 20 más, realmente tiene temas muy interesantes *-*
    Ya me suscribí y estaré viendo tus posts diariamente, me han sido de gran ayuda. ♥

    ResponderEliminar
  43. Oooh, que chulo!!! Oye, sabes como se puede hacer algo parecido pero que salga los iconos de las redes sociales y puedas hacer click en ellos? Por ejemplo, como aparece en este demo: http://demo.veethemes.com/demo?theme=Gossip y con texto escrito por tí, tambien :)
    Gracias!

    ResponderEliminar
  44. Muchas gracias, Blanca, por este estupendo post. Gracias a él he conseguido hacerlo. Saludos.

    ResponderEliminar
  45. Este comentario ha sido eliminado por el autor.

    ResponderEliminar

© Personalización de Blogs. Diseño: Eve y Blanca.