Las Imagenes dicen mucho a la hora de presentarlas en tu pagina o blog,implementar unos trucos a estas para que tomen vida o cambien de "Antes y Despues" es lo que voy a enseñar hoy es un truco de CSS bien divertido.
Este ejemplo de CSS muestra que solo usando animacion CSS3 para animar un "clip" propiamente de una imagen anterior para hacer el efecto de pelarla y revelar una nueva imagen cuando ponemos el cursor del mouse sobre la misma.El Resultado es sencillo pero divertido creas un efecto de imagen de"Antes y Despues".
Chequea Como Añadir Zoom Efect a las Imagenes
Ejemplo:
Como Implementar este efecto de pelado de imagenes o( peel back) en tu blog de blogger.1.Entre a la interface de blogger>>Plantilla>>>Editar Html
2.Busca la siguiente etiqueta </head>.
3.Copia y pega el codigo de abajo sobre/delante la siguiente etiqueta </head>
<style type="text/css">
a.nowandthen{
position:relative;
display: block;
overflow:hidden;
cursor: pointer;
width: 650px; /* set width of image container */
height: 434px; /* set height of image container */
}
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,650px,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;
}
</style>
Nota:Puedes Cambiar el ancho y alto de las imagenes cambiando en el codigo de arriba:
width: 650px; /* set width of image container */
height: 434px; /* set height of image container */
y donde dice clip: rect(0,650px,434px,0) pondras las medidas de la imagen que pongas.
4.Da Click a Guardar Plantilla.
5.Ahora ve a diseno y y da click en Anadir un Gadget escoges HTML/Javascripts y pegas en el siguiente codigo:
<a class="nowandthen"> <img src="http://img526.imageshack.us/img526/8063/beforejt.jpg" alt=""> <img src="http://img52.imageshack.us/img52/75/afteruc.jpg" alt=""></a>
Nota:Cambia estas imagenes a las que deseas poner en tu pagina web o blog.
Una vez tengas las imagenes que deseas poner das click en guardar Html/Javascript.
Chequea Como Añadir Efecto Danza a Imagenes y Enlaces
Y Listo ahora las visitas a tu pagina disfrutaran de un efecto de imagen de pelado cada vez que pongan el cursor del mouse sobre las mismas.
0 comentarios:
Publicar un comentario