Realizamos otro ejemplo de animaciones para tu galería de fotos solamente con CSS 3.
Continuamos explorando las posibilidades de las animaciones CSS3, con nuevos ejemplos prácticos que estamos seguros resultarán interesantes para los aficionados al desarrollo de páginas web.
En este artículo vamos a realizar una galería de fotos, en la que las imágenes aparecen desordenadas y al pasar por ellas pasan a primer plano y se ven a su tamaño real. En el artículo anterior vimos como realizar un ejemplo distinto de galería inspirado en las clásicas Polaroid. Ahora podemos ver otra idea de galería fotográfica con animaciones CSS 3, que tendrá un resultado bastante curioso, pero veremos que es más sencilla de realizar que la anterior.
Vamos a colocar primero nuestro código HTML para ir viendo poco a poco cómo construiríamos nuestro ejemplo.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Album de fotos con CSS</title>
<link rel="stylesheet" href="album2.css" type="text/css">
</head>
<body>
<div id="galeria">
<div id="imagen1">
<img src="images/image1.jpg">
</div>
<div id="imagen2">
<img src="images/image2.jpg">
</div>
<div id="imagen3">
<img src="images/image3.jpg">
</div>
<div id="imagen4">
<img src="images/image4.jpg">
</div>
<div id="imagen5">
<img src="images/image5.jpg">
</div>
<div id="imagen6">
<img src="images/image6.jpg">
</div>
</div>
</body>
</html>
En principio no hay nada que no sepamos, es simplemente un <DIV id=galeria> y dentro hemos ido colocando las imágenes dentro de otros <DIV>.
Ahora pasamos al código CSS que es el realmente importante:
Primero unos estilos generales para la galería:
#galeria {
width: 800px;
height: 600px;
margin: 20px auto;
padding: 40px;
position: relative;
}
Luego unos estilos específicos para cada imagen:
#galeria div {
position: absolute;
overflow: hidden;
opacity: 0.9;
-webkit-transition: all 0.5s linear;
-webkit-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: -3px -3px 50px #666;
box-shadow: -3px -3px 50px #666;
-webkit-transform: scale(0.60);
}
Aquí lo que hacemos es crear un borde alrededor de cada imagen, dejarla un poco transparente y bajarla el tamaño, para que luego cuando pasemos el ratón crezca a su tamaño real.
#galeria div:hover {
z-index: 999;
-webkit-transform: rotate(0deg);
opacity: 1;
}
Con este código conseguimos que la imagen vaya al primer plano de la pantalla y se vea sin transparencia, al pasar el ratón por encima de la imagen.
#imagen1 {
top: 50px;
left: 130px;
z-index:1;
}
#imagen2 {
top: 300px;
left:100px;
z-index:7;
}
#imagen3 {
top: 420px;
left:350px;
z-index:3;
}
#imagen4 {
top: 135px;
left: 450px;
z-index:4;
}
#imagen5 {
top: -100px;
right: 200px;
z-index:5;
}
#imagen6 {
top: 220px;
right: 120px;
z-index:6;
}
Y finalmente con estos estilos lo que hacemos es colocar las imágenes donde nos de la gana. Si tuviéramos un sistema automático que nos mostrara más imágenes estos estilos los podríamos poner directamente en nuestro código.
Otra opción posible para este álbum es la de rotar las imágenes para que parezcan más desordenadas, para ello tan solo tendríamos que añadir la propiedad -webkit-transform: rotate(xdeg); a cada imagen, siendo x los grados a rotar.
En el siguiente artículo veremos como crear un menú dinámico sin Javascript ni jQuery ni programación en otros lenguajes que no sean HTML y CSS 3.