banner
hace 4 años
838 Views

Transición de Imagen con Css3

Autor:
banner

 
 
Aprende a crear una Transición de Imagen Css3 rápida y sencilla y que te permita crear animaciones elegantes y vistosas.
 
Estas nuevas herramientas son fundamentales para los diseñadores web, ademas de facilitar el trabajo, la rapidez y simplicidad del código, generan un ahorro de tiempo, significativo.

 

Conoce las Nuevas Propiedades de Css3

 

Crearemos una Sencilla Animación, que consistirá en definir una imagen y al pasar el cursor por encima, cambiara por otra

 

Esto nos es de gran utilidad a la hora de situar información de la imagen, oculta en primera instancia, pero que se active al realizar la acción.

Así creamos una web más Interactiva y Dinámica.

Primero deberemos definir las imágenes en el código Html

 

Para ello creamos el código de las 2 imágenes con las mismas dimensiones, pero diferente clase una sera class=”primera” y a la otra class=”segunda”; los dos elementos los agruparemos en una <div id=”contenedor”>, con esto tendríamos en código Html listo.

 




<div id="contenedor">
<img class="primera" src="img/1.jpg" width="476" height="476" />
<img class="segunda" src="img/2.jpg" width="476" height="476" />
</div>



 

Es en el Código Css3 donde se descubre la simplicidad y beneficios que nos trae este nuevo estándar web, gracias a lenguajes tales como: Html5 y Css3; el desarrollo web se ha facilitado y simplificado, ademas de estructurar los contenidos, para una mejor comprensión de la semántica de la web.

 

Solo necesitamos dar diseño a 3 elementos; primero al contenedor (<div id=”contenedor”>),después pasaremos a la imagen y por ultimo haremos aparecer la segunda imagen mediante La Transición de Imágenes con Css3.

 

El primero simplemente es para posicionar el contenedor que agrupa las imágenes.

En el segundo creamos la transición, en este caso utilizamos la propiedad opacity, con duración de un segundo y por ultimo linear.

 

Para finalizar tenemos la segunda imagen, que mediante su class=”segunda” accedemos a ella y con la funcion “hover” le asignamos una opacidad de 0.

 


#contenedor{
position:relative;
height:281px;
width:450px;
margin:0 auto;
}

#contenedor img {
position:absolute;
left:0;
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
transition: opacity 1s linear;
}

#contenedor img.segunda:hover {
opacity:0;
}

 

Con este código Css damos por concluido el tutorial, hemos creado una Transición de Imágenes Css3 muy fácil y sencilla, pero que a su vez genera cierto dinamismo en la web.

 

Cualquier duda o problema no dudes en comentar

Sendoa

Sendoa

¡Aúpa! Me llamo Sendoa y soy un apasionado del Diseño y Desarrollo Web.

Fundador de WebSdcStudio.es; mi blog personal, donde expongo diferentes contenidos de ayuda, consejos, trucos, recursos... sobre el mundo del Diseño y Desarrollo Web.
Sendoa

Latest posts by Sendoa (see all)

Articulos Relacionados

Tags Artículos:
Artículos Categorías:
Css3 · Desarrollo Web
banner

Deja un Comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Left Menu Icon
Web Sdc Studio
Right Menu Icon