Crear una galeria de imagenes con solo CSS

24345

Normalmente para crear una galería de imágenes se hace uso de Javascript, para ahorrar tiempo y código en marcha. En este caso mostrare de manera sencilla, pero eficaz como hacer un codigo legible para lograr un buen resultado:

Empezamos con el código base

Comencemos con el HTML. La estructura es importante aquí, ya que usaremos entradas de radio para determinar la imagen seleccionada. Por lo tanto, la entrada, la miniatura y la imagen grande deben estar juntas en un contenedor y en un orden específico. Mire el código HTML de muestra a continuación:

<section class="gallery">
  <div class="gallery__item">
    <input
      type="radio"
      id="img-1"
      checked
      name="gallery"class="gallery__selector"
    />
    <img
      class="gallery__img"
      src="https://i.picsum.photos/id/1015/600/400.jpg"
      alt=""
    />
    <label for="img-1"class="gallery__thumb">
      <img src="https://i.picsum.photos/id/1015/150/100.jpg" alt="" />
    </label>
  </div>
</section>

Es importante que el ID de la entrada coincida con el del <label>elemento. La imagen grande debe estar después de la <input/>etiqueta y la miniatura debe ir dentro del <label>. Se procede con múltiples divs de galería__item, uno para cada una de las imágenes. Se debe asegurar de que cada uno tenga un ID único pero el mismo atributo de nombre para que tenga funcionalidad.

RETOQUES DE CSS

El código base es el siguiente:

* {
  box-sizing: border-box;
}

$max-img-width: 600px;
$max-img-height: 400px;

img {
  max-width: 100%;
  vertical-align: top;
}

La galería responderá, pero necesitará un ancho y una altura máximos de su imagen grande. También hay algunas propiedades adicionales para todas las imágenes. La alineación vertical eliminará el espacio debajo de las imágenes y el ancho máximo significará que las imágenes se reducirán dentro de un contenedor.

Ahora para agregar un poco de estilo al contenedor de la galería. Estará centrado y rematado en el ancho más grande de la imagen. El relleno creará un espacio para colocar la imagen grande y el relleno de porcentaje permitirá que la imagen mantenga la relación de aspecto correc

.gallery {
  display: flex;
  margin: 10px auto;
  max-width: $max-img-width;
  position: relative;
  padding-top: $max-img-height/$max-img-width * 100%;

  @media screen and (min-width: $max-img-width) {
    padding-top: $max-img-height;
  }
}

La imagen debe colocarse absolutamente dentro del espacio de relleno creado por el contenedor. También significa que saldrá de la fila de miniaturas. Puede cambiar la transición de la imagen y el espaciado de las miniaturas para que coincida mejor con el resto de su página.

.gallery__img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.gallery__thumb {
  padding-top: 6px;
  margin: 6px;
  display: block;
}

El estilo de la entrada es la parte más importante y es lo que hace que todo funcione. La entrada en sí debe estar oculta para que no tenga un botón de opción flotando y luego las imágenes se pueden diseñar cuando se selecciona la entrada. En este caso, la opacidad se cambia para hacer visible la imagen grande y la imagen en miniatura obtiene una sombra de cuadro para que pueda ver que está seleccionada.

.gallery__selector {
  position: absolute;
  opacity: 0;
  visibility: hidden;

  &:checked {
    + .gallery__img {
      opacity: 1;
    }
    ~ .gallery__thumb > img {
      box-shadow: 0003px#0be2f6;
    }
  }
}