Lightbox de Galería adaptable minimalista con HTML/CSS puro

Vista prévia

Descripción

Una caja de luz de galera simple y responsiva para mostrar tus imágenes favoritas, construidas usando HTML puro y CSS. Al hacer clic en el pulgar, se mostrarán todas las imágenes en una ventana emergente de lightbox adaptable, desplazable y con capacidad de respuesta.

Funcionamiento

Agregue miniaturas y contenedores lightbox a su página web.

<a href="#img1">

<img class="thumb" src="thumb-1.jpg">
</a>
<!-- lightbox container hidden with CSS -->
<div class="lightbox" id="img1">

<a href="#img3" class="light-btn btn-prev">prev</a>


<a href="#_" class="btn-close">X</a>


<img src="images/1.jpg">

<a href="#img2" class="light-btn btn-next">next</a>
</div>

<a href="#img2">
<img class="thumb" src="thumb-2.jpg">
</a>
<!-- lightbox container hidden with CSS -->
<div class="lightbox" id="img2">

<a href="#img1" class="light-btn btn-prev">prev</a>


<a href="#_" class="btn-close">X</a>


<img src="2.jpg">

<a href="#img3" class="light-btn btn-next">next</a>
</div>

<a href="#img3">
<img class="thumb" src="thumb-3.jpg">
</a>
<!-- lightbox container hidden with CSS -->
<div class="lightbox" id="img3">

<a href="#img2" class="light-btn btn-prev">prev</a>


<a href="#_" class="btn-close">X</a>


<img src="3.jpg">

<a href="#img1" class="light-btn btn-next">next</a>
</div>

Los estilos CSS principales.

.thumb {

max-height: 171px;

border: solid 6px rgba(5, 5, 5, 0.8);
}

.lightbox {

position: fixed;

z-index: 999;

height: 0;

width: 0;

text-align: center;

top: 0;

left: 0;

background: rgba(0, 0, 0, 0.8);

opacity: 0;
}

.lightbox img {

max-width: 90%;

max-height: 80%;

margin-top: 2%;

opacity: 0;
}

.lightbox:target {

/** Remove default browser outline */

outline: none;

width: 100%;

height: 100%;

opacity: 1 !important;
}

.lightbox:target img {

border: solid 17px rgba(77, 77, 77, 0.8);

opacity: 1;

webkit-transition: opacity 0.6s;

transition: opacity 0.6s;
}

.light-btn {

color: #fafafa;

background-color: #333;

border: solid 3px #777;

padding: 5px 15px;

border-radius: 1px;

text-decoration: none;

cursor: pointer;

vertical-align: middle;

position: absolute;

top: 45%;

z-index: 99;
}

.light-btn:hover { background-color: #111; }

.btn-prev { left: 7%; }

.btn-next { right: 7%; }

.btn-close {

position: absolute;

right: 2%;

top: 2%;

color: #fafafa;

background-color: #92001d;

border: solid 5px #ef4036;

padding: 10px 15px;

border-radius: 1px;

text-decoration: none;
}

.btn-close:hover { background-color: #740404; }