Galería de imágenes adaptable (RWD) con miniaturas, sólo con CSS

Lo de hoy será para construir una caja con imágenes que llevará unas miniaturas automáticas en el lateral. Las miniaturas servirán de "enlaces" para ir mostrando alternativamente a toda pantalla una sola de las imágenes principales. Vamos, lo que se viene llamando una galería pero en un mismo espacio.

Hace tiempo que quería desarrollar con CSS algún tipo de galería como esta que facilitara el mostrar varias imágenes en un espacio reducido y el otro día me puse a probar con Codepen hasta que logré algo que me pareció digno y sencillo. Por cierto que os recomiendo ese recurso porque resulta muy útil para ir probando cosas, quitar y poner reglas y ver el resultado inmediatamente según se cambian.

Esta galería tiene además la peculiaridad de que es totalmente adaptable a la ventana (RWD) por lo que su tamaño se ajusta a la misma. Además, las imágenes principales se visualizan bajando poco a poco, a modo de cortinilla, lo que le da un toquecillo simpático.

Pongo la demo lo primero por si no tenéis paciencia. ¡Hala! a mover el puntero y a reducir la ventana del navegador para probarla.

La parte HTML, lo que hay que insertar dónde queramos que aparezca la galería, es algo muy sencillo y además invariable. Sólo se trata de una caja contenedora y luego varios div vacíos con clase imagen, tantos como imágenes queramos mostrar.

Lo de invariable es porque con el sistema CSS que plantearé después, las imágenes irán como fondos (background) y por tanto, su dirección habrá que ponerla en el estilo en lugar de aquí que sería lo habitual.

<div class="galeria">
 <div class="imagen"></div>
 <div class="imagen"></div>
 <div class="imagen"></div>
 <div class="imagen"></div>
</div>

Y bien, ahora vamos a lo que hace la magia, el CSS. Realmente habrá que ponerlo todo seguido, pero por motivos didácticos lo veremos por partes.


En primer lugar está la caja contenedora, sin ningún misterio. Sólo un posicionamiento relativo para poder ubicar dónde queramos lo que llevará dentro. Lo demás es un centrado, una sombrita y poco más.

.galeria {
position: relative;
width: 90%; /* Ancho a ocupar por la galería sobre el total disponible */
overflow: hidden;
margin: 10px auto;
background-color: #000;
box-shadow: 1px 1px 6px #000;
}

A la galería le añadimos un fondo principal por defecto, que será el que se vea mientras no pulsamos (hover realmente) alguna de las miniaturas. Lo hacemos mediante un añadido con el pseudoelemento :before y lo colocamos justo encima con posicionamiento absoluto. Para que las imágenes principales tengan algo más de realce, esta la puse casi transparente (opacity: .1;).

En adelante marcaré en verde lo único que hay que cambiar, las direcciones de las imágenes. Esta primera como dije, es la que saldrá inicialmente y con un background-size: cover; hacemos que se extienda por todo el espacio disponible de la caja contenedora.

.galeria:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: url(https://lh4.googleusercontent.com/-3QNEIgX3Gv4/UCPyLTtnmHI/AAAAAAAAEDY/KGb0eEM9GZo/s720/fuerzas-naturaleza.jpg); /* Fondo por defecto */
-moz-background-size: cover;-webkit-background-size: cover;background-size: cover;
opacity: .1;
}

Si ponemos sólo lo anterior, de momento no veremos nada, ya que no tenemos ningún contenido que rellene la caja para darle alguna dimensión y por tanto esta será de tamaño cero, invisible para nosotros. Pero con lo siguiente ya comenzamos a ver cosas.

Esta será la clase que monte las miniaturas sobre ese fondo y aquí lo que podéis configurar es el ancho. En un principio yo las programé con el 15% del ancho total (algo menos de un sexto), pero lo imprescindible es que ese padding-bottom que es lo que define el alto de la miniatura, lleve idéntico porcentaje para que sean cuadradas.

.imagen {
position: relative;
width: 15%; /* Ancho de la miniatura sobre el ancho total de la galería */
padding-bottom: 15%; /* Idéntico al anterior para miniaturas cuadradas */
background-position: 50% 50%;
-moz-background-size: cover;-webkit-background-size: cover;background-size: cover;
cursor: pointer;
}

Con lo anterior ya sería visible el fondo por defecto y tenemos reservados unos espacios cuadrados a la izquierda de un 15% del ancho, pero vacíos. Y no es que este sea el orden más lógico, pero lo siguiente nos servirá para ir viendo ya cosillas.

Ahora es cuando comenzamos a poner las imágenes que conformarán nuestra galería usando :nth-of-type(x), que lo que hace es aplicar a la caja x con clase imagen sus correspondientes background. Así el 1 será para la primera, el 2 para la segunda, etc. Como las hicimos de un 15%, de momento nos quedarán como miniaturas. Una parte de lo que queríamos.

.imagen:nth-of-type(1) {
background-image: url(https://lh4.googleusercontent.com/-3QNEIgX3Gv4/UCPyLTtnmHI/AAAAAAAAEDY/KGb0eEM9GZo/s720/fuerzas-naturaleza.jpg);
}
.imagen:nth-of-type(2) {
background-image: url(https://lh5.googleusercontent.com/-KijskybjlCc/UCPyNCwVxPI/AAAAAAAAEDg/8AwgBhZyhG4/s800/fuerzas-naturaleza2.jpg);
}
.imagen:nth-of-type(3) {
background-image: url(https://lh5.googleusercontent.com/-uGIMoR677PM/UCPyOBjNWVI/AAAAAAAAEDo/XE73W5FQW-c/s800/fuerzas-naturaleza3.jpg);
}
.imagen:nth-of-type(4) {
background-image: url(https://lh5.googleusercontent.com/-nbNq900tVT4/UCPyQeZkP_I/AAAAAAAAEDw/WsBQhD2Da-o/s800/fuerzas-naturaleza4.jpg);
}

Bueno, pues ya tenemos un contenedor, una imagen grande por defecto y cuatro fondos que nos quedarán como miniaturas a la izquierda. Ahora viene dónde hacemos que esas miniaturas se repliquen convirtiéndose en imágenes grandes. Para ello añadimos encima de cada imagen otra caja con el mismo fondo que la de su elemento padre.

Esto lo hacemos de nuevo con :before, pero esta vez aplicándolo sobre la clase .imagen. El background-image de ese elemento superpuesto tendrá el valor inherit y así todos heredarán la imagen de su padre desde una sola regla.

.imagen:before {
content: "";
position: absolute;
top: -700%; /* ((Nºimágenes*2)-1)*100*/
left: 100%;
width: 566%; /* (10000/ancho_imagen)-100 */
height: 400%; /* Nºimagenes*100 */
background-image: inherit;
-moz-background-size: cover;-webkit-background-size: cover;background-size: cover;
-moz-transition: all .8s ;-webkit-transition: all .8s ;transition: all .8s ;
}

Y me tengo que detener algo más porque este trozo anterior es dónde está gran parte del secreto de esta galería para que sea adaptable. De arriba hacia abajo...

• top: Cada imagen grande se posiciona sobre su correspondiente miniatura y el porcentaje va referido a lo que ocupa esta de alto, por eso, para que estén inicialmente ocultas las tenemos que subir tanto como imágenes haya, pero multiplicado por dos para que la última no se quede en la coordenada 0 y por tanto visible. El -1 es un ajuste para no subir más de la cuenta.
• left: aquí simplemente nos llevamos la imagen grande un ancho (100%) hacia la derecha para salvar las miniaturas.
• width: La imagen se muestra grande ampliando la miniatura (.imagen) un determinado porcentaje. Este lo averiguamos calculando qué parte sobre el total supone el ancho de la miniatura (.imagen, 15% en el ejempo) y luego viendo cuanto nos sobra para dividir. Matemáticamente esto sería (100-ancho_imagen)*(100/ancho_imagen) y simplificando, (10000/ancho_imagen)-100.
• height: La altura de la imagen necesariamente tiene que ser el del total ocupado por las miniaturas, o lo que es lo mismo la cantidad de ellas que haya multiplicado por 100.

El background-image con inherit ya lo he explicado y el transition es para que la imagen grande aparezca suavemente al pasar el puntero por encima (hover).


Y por fin el efecto para el hover. Una vez que las imágenes están escondidas por arriba, ya sólo hace falta bajarlas modificando su top un determinado porcentaje. Su valor será negativo y coincidirá con el número de orden que tengan menos 1, multiplicado por cien.

.imagen:hover:nth-of-type(1):before {
top: 0%; /* (Nº.nth-1)*(-100) */
}
.imagen:hover:nth-of-type(2):before {
top: -100%; /* (Nº.nth-1)*(-100) */
}
.imagen:hover:nth-of-type(3):before {
top: -200%; /* (Nº.nth-1)*(-100) */
}
.imagen:hover:nth-of-type(4):before {
top: -300%; /* (Nº.nth-1)*(-100) */
}

Para los perezosos que prefieren todo el CSS junto para copiarlo del tirón, en este fichero lo tenéis.


Con poco podemos añadir alguna regla más al hover sobre .imagen:before y obtener algunos efectos curiosos.

Por ejemplo en otra demo añadí un simple transform: scale(.9); y quedó esto que podéis ver en el siguiente enlace. Ahí también podréis ver cómo se ajustan los valores de las reglas para una galería con seis imágenes, aunque espero que con los comentarios que puse en el CSS sea suficiente para que podáis montarla con la cantidad de imágenes que queráis.

Y por cierto... Que a nadie se le ocurra pedir la variante con miniaturas en horizontal, que eso complica bastante el asunto y si lo hago no va a ser en el corto plazo ;)

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter