Galería lightbox modal y responsive, solo con CSS

Publicado en Publicación

Hasta ahora hemos visto que con CSS podemos dar estilo a casi cualquier elemento. En esta ocasión vamos a ver como crear una galería lighbox responsive sin utilizar javascript y con apenas unas líneas de código CSS.

Vista galería:

lightbox1

Vista modal, al pulsar sobre una imagen:

lightbox2

código

Elementos HTML


<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Galería lightbox responsive solo con CSS">
    <meta name="author" content="(cc) 3con14" />
    <title>Galería</title>
    <link rel="stylesheet" href="/css/normalize.css">    
    <link rel="stylesheet" href="/css/estilos.css">
</head>
<body>
<main>
  <h3>Galería de imágenes lightbox <br>responsive solo con CSS</h3>

  <div class="galeria">
    <div class="item"><a href="#img1"><img src="/img/1p.png"></a></div>
    <div class="item"><a href="#img2"><img src="/img/2p.png"></a></div>
    <div class="item"><a href="#img3"><img src="/img/3p.png"></a></div>
    <div class="item"><a href="#img4"><img src="/img/4p.png"></a></div>
  </div>
  
  <div class="modal" id="img1">
    <div class="imagen">
      <a class="ant" href="#img4"></a>
      <a href="#" title="cerrar"></a><img src="/i2017bto2/img/1g.jpg">
      <a class="sig" href="#img2"></a>
    </div>
  </div>

  <div class="modal" id="img2">
    <div class="imagen">
      <a class="ant" href="#img1"></a>
      <a href="#" title="cerrar"></a><img src="/img/2g.jpg">
      <a class="sig" href="#img3"></a>
    </div>
  </div>

  <div class="modal" id="img3">
    <div class="imagen">
      <a class="ant" href="#img2"></a>
      <a href="#" title="cerrar"></a><img src="/img/3g.jpg">
      <a class="sig" href="#img4"></a>
    </div>
  </div>

  <div class="modal" id="img4">
    <div class="imagen">
      <a class="ant" href="#img3"></a>
      <a href="#" title="cerrar"></a><img src="/img/4g.jpg">
      <a class="sig" href="#img1"></a>
    </div>
  </div>

</main>
</body>
</html>

Reglas CSS


:root { --separa: 4px; }
* { 
  box-sizing: border-box;
  transition: all 0.3s;
}
html {
  font       : 16px sans-serif;
  background : steelblue;
}
h3 { text-align: center; margin: 2em; }
main {
  max-width: 800px;
  width: 98%;
  min-height: 96vh;
  margin: 2vh auto;
}
.galeria {
  max-width       : 100%;
  line-height     : 0;
  padding         : var(--separa);
  padding-right   : 0;
  display         : flex;
  flex-wrap       : wrap;
  justify-content : space-around;
}
.item {
  padding: var(--separa);
  width: 180px;
}
.item img {
  max-width : 100%;
  height    : auto;
  opacity   : 0.4;
  outline   : 3px solid #fff;
}
.item img:hover {
  opacity : 1;
  cursor  : pointer;
}
.modal {
  display: none;
}
.modal:target {
  display          : block;
  position         : fixed;
  top              : 0;
  left             : 0;
  width            : 100vw;
  height           : 100%;
  display          : flex;
  background-color : rgba(0,0,0,0.6);
}
.imagen {
  margin          : auto;
  width           : 100%;
  display         : flex;
  justify-content : center;
  align-items     : center;
}
@keyframes zoom {
  0%   { opacity: 0.2; transform: scale(0.5); }
  100% { opacity: 1; transform: scale(1);}
}
.imagen a { margin: 0 4px; }
.imagen img {
  max-width : 100%;
  width     : 80vw;
  height    : auto;
  border    : 8px solid #fff;
  animation : zoom 0.5s ease-in-out;
  position  : relative;
}
.imagen a:nth-child(2)::after {
  content       : "X";
  width         : 40px; height: 40px;
  line-height   : 40px;
  text-align    : center;
  font-size     : 2em;
  border-radius : 50%;
  border        : 2px solid hsla(0, 0%, 0%, 0.3);
  background    : hsla(0, 0%, 0%, 0.5);
  color         : hsla(0, 100%, 50%, 0.5);
  position      : absolute;
  top           : 1vh;left: 1vw;
  z-index       : 1;
}
.imagen a:nth-child(2):hover::after {
  border        : 2px solid hsla(0, 0%, 100%, 0.6);
}
.imagen a:nth-child(2) {
  margin : 0;
  height : 100%;
}
.ant,.sig {
  width  : 0px; height: 0px;
  border : 20px solid transparent;
}
.ant { border-right: 20px solid hsla(0, 100%, 100%, 0.8); }
.sig { border-left: 20px solid hsla(0, 100%, 100%, 0.8); }
.ant:hover { border-right: 20px solid hsla(0, 100%, 50%, 0.8); }
.sig:hover { border-left: 20px solid hsla(0, 100%, 50%, 0.8); }

Etiquetas: HTML5, CSS3

Imprimir