Dado que una galería de fotos, es un elementos típico y muy necesario en muchas webs, vamos a crear una galería aplicando un sencillo efecto estilo polaroid con CSS. Este efecto es ideal para resaltar fotografías o enmarcar elementos importantes dentro de una web. Para lograrlo, nos valdremos del selector after y de algunas transiciones muy básicas ¡Es hora de trabajar!
Preparando las imágenes a utilizar
Colocamos las imágenes dentro de una carpeta en nuestro proyecto, para no tenerlas sueltas.
Es recomendable que todas las fotos tengan la misma resolución.
Para este ejercicios, he tomado de unsplash algunas fotos: 01, 02, 03, 04, 05, 06. Créditos a sus correspondientes autores.
Escribimos el HTML necesario para la galería polaroid
Dentro de un <div>, colocaremos nuestras imágenes, las cuales irán dentro de una etiqueta <a> que únicamente llevará el atributo title, en el que he puesto, el nombre de cada autor de las fotos. A este <div> le hemos puesto como id la palabra polaroid.
<div id="polaroid">
<a title="Autor: Yousef Espanioly">
<img src="img/foto01.jpg" alt="Autor: Yousef Espanioly" />
</a>
<a title="Autor: Wallace Henry">
<img src="img/foto02.jpg" alt="Autor: Wallace Henry" />
</a>
<a title="Autor: Annie Spratt">
<img src="img/foto03.jpg" alt="Autor: Annie Spratt" />
</a>
<a title="Autor: Tsuyoshi Kozu">
<img src="img/foto04.jpg" alt="Autor: Tsuyoshi Kozu" />
</a>
<a title="Autor: Willian Justen de Vasconcellos">
<img src="img/foto05.jpg" alt="Autor: Willian Justen de Vasconcellos" />
</a>
<a title="Autor: Willian Justen de Vasconcellos">
<img src="img/foto06.jpg" alt="Autor: Willian Justen de Vasconcellos" />
</a>
</div>
También dentro de nuestra etiqueta <head> debemos colocar el enlace al archivo CSS que vamos a crear.
<link rel="stylesheet" href="estilo.css" />
Debe quedar algo parecido a esto:
Si echamos un vistazo en nuestro navegador, de momento solo veremos las imágenes una debajo de otra.
Escribiendo la hoja de estilos para la galería polaroid
Los primero es definir el espacio necesario, así que trabajaremos en el archivo CSS (hay que crearlo si no lo tenemos). Nuestro <div> será un objeto flex. También usaremos la propiedad flex-wrap para hacer que se acomoden automáticamente en diferentes filas (por si tenemos muchas imágenes) y con flex-direction nos aseguramos que siempre se acomoden en fila. Adicionalmente, haremos que el div tenga un ancho de 60% y le podremos un margen de 10% arriba y abajo y automático para la izquierda y la derecha. Con esto último aseguramos el centrado. Para rematar, le daremos un color amarillo maíz de fondo.
#polaroid{
display: flex;
flex-wrap: wrap;
flex-direction: row;
width: 60%;
margin: 10% auto;
background-color: cornsilk;
}
Echando un vistazo a nuestro progreso, todavía no se ve muy bonito, pero ya tenemos el <div> centrado, y dependiendo de la resolución de nuestro monitor, el fondo puede no verse ya que todavía no ajustamos las imágenes.
Trabajamos ahora con las etiquetas <a> dentro de nuestro <div> llamado polaroid. Les daremos a cada una de ellas, un ancho de 29.33%. Este valor se debe a que vamos a formarlas en filas de 3 columnas (100 / 3 = 33.33) pero le quitaremos 1% de margen para cada lado (1% a la izquierda, 1% a la derecha). Para el padding usaremos 1% para la parte superior, para la izquierda y la derecha y 3% para la parte inferior. Entonces, si restamos todos los 1% que utilice al 33.33%, nos da 29.33%.
También le ponemos una sombra con box-shadow, le ponemos 0 en el eje x, 3 píxeles en el eje y, un radio de 6 píxeles y un color gris no tan fuerte. Le aplicamos un color blanco de fondo, una transition animada de 0.3 segundos de tipo ease-in-out y centramos el texto.
#polaroid a{
width: 29.33%;
margin: 1%;
padding: 1% 1% 3% 1%;
box-shadow: 0 3px 6px #9c9c9c;
background-color: #FFF;
transition: all 0.3s ease-in-out;
text-align: center;
}
Ahora ya cambia la cosa al hacer la vista previa, aunque las imágenes siguen siendo demasiado grandes.
Para hacer que las imágenes se ajusten, simplemente le decimos a nuestra hoja de estilos que todas las imágenes que están dentro de un enlace que pertenezca al objeto polaroid, deben tener un ancho de 100%.
#polaroid a img{
width: 100%;
}
Y con eso, ya ve mucho mejor.
Sin embargo, la animación de las imágenes no parece estar funcionando. Para activarla, lo haremos con el selector hover de las etiquetas <a>. Lo primero es darle un z-index mayor a la cantidad de imágenes que tenemos, con esto logramos que la imagen por donde pasemos el ratón siempre quede encima de las demás. Adicionalmente para resaltarla todavía más, con la propiedad transform la haremos 1.5 veces más grande.
#polaroid a:hover{
z-index: 7; /* tengo 6 imágenes, 7 es mayor */
transform: scale(1.5);
}
Finalmente, para mostrar el texto del atributo title de cada etiqueta <a> debajo de su correspondiente imagen, usamos el selector after y con la propiedad attr le decimos que queremos usar el título.
#polaroid a:after{
content: attr(title);
}
Resultado final de la galería
¡Y este es el resultado final!
Si quieres probar, puedes descargar el código fuente
Comentarios, dudas y preguntas
¡Y eso es todo! No olvides dejar tus comentarios, dudas y / o preguntas. Con gusto las respondemos.
