Los efectos en imágenes siempre resultan atrayentes, este en concreto muestra una transición suave utilizando CSS3.

Para hacerlo necesitamos dos imágenes de la misma medida y que esa medida esté indicada en los estilos, es decir, que todas las imágenes a mostrar con este efecto tendrán la misma medida.

Los estilos los añadimos en plantilla edición de HTML justo antes de ]]></b:skin>

Si la imagen la añadimos en un gadget de HTML también podemos añadir los estilos en su interior sin olvidar envolverlos con las etiquetas <style> y </style>

a.nowandthen{
position:relative;
display: block;
overflow:hidden;
cursor: pointer;
width: 550px; /* anchura de la imagen */
height: 434px; /* altura de la imagen */

}

a.nowandthen img{
position:absolute;
left:0;
top:0;
width: 100%;
height: 100%;
-moz-transition: all 0.5s ease; /* enable transition */
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
z-index: 2;
clip: rect(0,550px,434px,0); /* clip values should be rect(0,image_width,image_height,0) */
}

a.nowandthen img:nth-of-type(2){ /* hide "after" image beneath "before" so it's initially out of view */
z-index: 1;
}

a.nowandthen:hover img:nth-of-type(1){ /* clip "before" image to reveal "after" */
clip: rect(0,0,434px,0); /* clip values should be rect(0,0,image_height,0) */
opacity: 0;
}

a.nowandthen.alt{
width: 300px; /* set width of image container */
height: 354px; /* set height of image container */
}

a.nowandthen.alt img{
clip: rect(0,300px,354px,0); /* clip values should be rect(0,image_width,image_height,0) */
}

a.nowandthen.alt:hover img:nth-of-type(1){
clip: rect(0,0,354px,0); /* clip values should be rect(0,0,image_height,0) */
}

Las imágenes las añadimos ahí donde deseamos mostrarlas, ya sea un post o un gadget.
<a class="nowandthen">
<img src="/2012/08/Url_imagen_beforejt.jpg" alt="">
<img src="Url-imagen-afteruc.jpg" alt="">
</a>

REFERENCIADynamicdrive



Hogar CRECER

Hola Gem@!

Hay alguna manera de hacerlo funcionar en IE? Un beso.

Gem@

Funciona en IE al menos en IE9 otro beso para ti Corina :)

Responder
m.p.moreno

Fascinante!!

Un cariñoso abrazo :)

Gem@

Abrazos m.p.moreno :D

Responder
Syl

Precioso! me lo apunto para algún post :D
Saludos Gem@!

Gem@

Hola Syl!! ¿cómo estás? espero que bien y el ejemplo todo tuyo :)

Responder
Manu

Hola. No me funciona en Chrome. Saludos

Gem@

Hola Manu, comprueba si este ejemplo del autor lo ves con Chrome yo no puedo comprobarlo. http://www.dynamicdrive.com/style/csslibrary/item/before_and_after_peel_back_image/

Responder
Karla Castañeda

¡Hola Gema!, ¿Cómo estás?

Para esa fotografía en especial se ve muy mono, la chica se ve como en 3D.

Gem@

Hola Karla estoy bien ¿y tú? hacía bastante que no te "veía" :)

Karla Castañeda

jeje gracias por preguntar; pues fíjate que estoy bien embarazada, bueno, todavía no se me nota mucho pero al rato seguro parecerá que me comí una sandía, aunque en realidad me comí fue otra cosa jajaja...

Responder
TuMultitec

muy buen post ;)
hablando de trasiciones no estaría mal que le colocaras una transición a tu menu veo que tiene el de hover pero falta uno para q lusca un poco mas asi como si desvaneciera la transicion :)
pequeños detalles pero que hacen la diferencia ;)

saludos..

.navright a, .navright a:visited {
-webkit-transition: all 1s;
}

Gem@

Gracias por la recomendación TuMultitec, imagino que ya sabes esa frase de "para gustos hicieron los colores" ;)

Gem@

Mírate esto que pasa en tu sitio, igual es cosa de mi antivirus pero pero si acaso.. :(
http://img88.xooimage.com/files/1/6/7/4-9-2012-13.9.42-1-37ab1d5.jpg

Responder
bucha

Muy bueno gracias por compartirlo..

ya que estoy gente les comento de una campaña publicitaria para blogers se llama ” Link me x Link me” si estan interesados los invito a leer texto original y completo.. http://www.seoinformatica.com/t87-informate-sobre-la-campa%C3%B1a.html

Un saludo

Responder

Gem@

Gracias Bucha ;)

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:) :'( :( :P :D :$ ;) :-I :X :O |O :S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top