Bloguero-ec

Codigo Fuente, programación, Diseño Web

Realizando efectos css sobre imágenes..!

mayo 16, 2014
codigo-fuente,css,css3,efectos



Animación css3 de una imagen antes y después ,el efecto se consigue cuando al pasar el mouse sobre la imagen el efecto realiza un desplazamiento de imagen hacia la izquierda mostrando la siguiente imagen y dando un aspecto de transición de un antes y un después.

Esto utiliza un estilo css3 que podremos ver en el siguiente demo y a su vez el código fuente a utilizar para realizar este proyecto..

Archivos:

index.html

style.css

index.html entre <body> colocar las clases correspondientes:

<a class="nowandthen">
	<img src="img1.jpg" alt="">
	<img src="img2.jpg" alt="">
</a>

Como se darán cuenta se está utilizando un enlace, al colocar el mouse encima se crea el efecto

style.css el estilo es el que realiza el efecto css3

a.nowandthen{
position:relative;
display: block;
overflow:hidden;
cursor: pointer;
width: 650px; 
height: 434px; 
}

a.nowandthen img{
position:absolute;
left:0;
top:0;
width: 100%;
height: 100%;
-moz-transition: all 0.5s ease; 
-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); 
}


a.nowandthen img:nth-of-type(2){ 
z-index: 1;
}


a.nowandthen:hover img:nth-of-type(1){ 
clip: rect(0,0,434px,0); 
opacity: 0;
}

a.nowandthen.alt{
width: 300px; 
height: 354px; 
}

a.nowandthen.alt img{
clip: rect(0,300px,354px,0); 
}

a.nowandthen.alt:hover img:nth-of-type(1){
clip: rect(0,0,354px,0); 
}

Navegadores:

Probado en google chrome.

Probado en google FF mozilla.

Espero es sirva en algún proyecto…

Demostración

Mas Publicaciones

Siguenos




Conviertase en Editor

Te gustaría ser editor en Bloguero-ec.? Escribe tutoriales referente a programación, diseño web, CSS, entre otros y deja tu marca personal en nuestro sitio, contáctanos y empieza a editar Ya..

Compartir..!

© Copyright 2017 Bloguero-ec - Derechos Reservados

A %d blogueros les gusta esto: