Galería de imágenes css

facebook-svg gplus-svg twitter-svg

A continuación quiero crear una sencilla galería de imágenes utilizando solo CSS. También voy a utilizar variables CSS sin complicarme demasiado. De hecho las variables CSS aportan claridad y simplifican el código.

El HTML

El HTML es muy sencillo. Dentro del <div class="galeria"> tenemos 4 imágenes y 4 botones de radio, uno para cada imagen. De hecho los botones vienen primero porque, en el CSS, quiero utilizar la tilde ( ~ ). Como ya se sabe el selector elemento1 ~ elemento2 selecciona cada elemento2 precedido por un elemento1, y el selector input ~ img selecciona cada img  precedida por un input.
Observe por favor que el primer botón de radio está activado ( checked ).


  <div class="galeria">
    <input type="radio" name="navegacion" id="_1" checked>
    <input type="radio" name="navegacion" id="_2">
    <input type="radio" name="navegacion" id="_3">
    <input type="radio" name="navegacion" id="_4"> 
    <img src="https://www.fillmurray.com/260/300" width="260" height="300" alt="Galeria CSS 1" />
    <img src="https://www.placecage.com/c/260/300" width="260" height="300" alt="Galeria CSS 2"  />
    <img src="http://placekitten.com/260/300" width="260" height="300" alt="Galeria CSS 3" />
    <img src="http://www.stevensegallery.com/260/300" width="260" height="300" alt="Galeria CSS 4" />
  </div>

Las imágenes utilizadas son imágenes de substitución de varios bancos de imágenes. Para los que no saben como funciona esto: los dos números que aparecen al final del URL representan la anchura y la altura de la imagen. Por ejemplo este URL https://www.fillmurray.com/260/300 indica que se trata de una imagen que tiene una anchura es de 260px y una altura de 300px.

El CSS

En el CSS lo esencial es:

1. Apilar las imágenes una encima de otra utilizando position: absolute;

.galeria img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 3s;
  }

2. Al inicio todas las imágenes son completamente transparentes opacity: 0;

.galeria img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 3s;
  }

3. Al activar uno de los botones de radio ( input type="radio" ) seleccionamos la imagen correspondiente. El CSS aquí es un poco verboso: si el primer botón de radio ( input[type=radio]:nth-of-type(1) ) está activado ( :checked ) la primera imagen situada inmediatamente después ( ~ img:nth-of-type(1) ) cambia su opacidad de 0 a 1 (opacity: 1). Si el segundo botón. . . etc. . .

.galeria input[type=radio]:nth-of-type(1):checked ~ img:nth-of-type(1){opacity: 1;}
.galeria input[type=radio]:nth-of-type(2):checked ~ img:nth-of-type(2){opacity: 1;}
.galeria input[type=radio]:nth-of-type(3):checked ~ img:nth-of-type(3){opacity: 1;}
.galeria input[type=radio]:nth-of-type(4):checked ~ img:nth-of-type(4){opacity: 1;}

O sea: al activar el botón de radio correspondiente, la imagen pasa de opacity: 0 ( totalmente transparente ) a opacity:1 ( totalmente opaca ). La transición de opacity: 0; a opacity: 1; dura 3 segundos: transition: opacity 3s;

.galeria img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 3s;
  }

Véalo en codepen:

See the Pen Galeria CSS #1.0 by Gabi (@enxaneta) on CodePen.

Utilizar variables CSS

Podemos observar que hay números que se repiten en el código, como la anchura y la altura de las imagines. Esta es una de aquellas situaciones donde podemos, incluso debemos utilizar variables.
Así que para establecer la anchura y la altura de las imágenes y por lo tanto la anchura y la altura de la galería, he utilizado variables CSS: --w para la anchura de la imagen y --h para la altura.
Puedo declarar estas variables en el CSS pero en este caso he decidido ponerlas inline en el HTML:

<div class="galeria" style="--w: 260px; --h: 300px;">

¿Por qué lo he hecho? Porque normalmente construimos el HTML de manera dinámica, y es aquí donde aparecen la anchura y la altura de las imágenes. Así que esto me permite personalizar el tamaño de las galerías sin necesidad de modificar el CSS.

Por de otra parte, en el CSS, siempre que aparezca el valor 260px lo reemplazo con var(--w) y el valor 300px con var(--h).

See the Pen Galeria CSS #1 by Gabi (@enxaneta) on CodePen.

Lo bonito de todo esto es que ahora puedo poner en una página tantas galerías como quiera, cada galería con su tamaño y con sus imágenes, y todo por solo unas cuantas líneas de CSS.

See the Pen Galeria CSS #1.2 by Gabi (@enxaneta) on CodePen.