Galería de fotos CSS puro con soporte de lightbox de imagen

Vista prévia

Descripción

Una galería de fotos responsive basada en CSS/CSS3 pura para su sitio web de portafolio que tiene la capacidad de ver la versión de imagen grande en una caja de luz.

Funcionamiento

Inserte las imágenes pequeñas como miniaturas en una cuadrícula de la siguiente manera.

<div class="grid">

<label for="pic-1" class="grid-item"><img src="1.jpg"></label>

<label for="pic-2" class="grid-item"><img src="2.jpg"></label>

<label for="pic-3" class="grid-item"><img src="3.jpg"></label>

<label for="pic-4" class="grid-item"><img src="4.jpg"></label>

<label for="pic-5" class="grid-item"><img src="5.jpg"></label>

...
</div>

Inserte las imágenes grandes que se mostrarán en una caja de luz de pantalla completa con capacidad de respuesta.

<input type="checkbox" id="pic-1">
<label for="pic-1" class="lightbox"><img src="large-1.jpg"></label>
<input type="checkbox" id="pic-2">
<label for="pic-2" class="lightbox"><img src="large-2.jpg"></label>
<input type="checkbox" id="pic-3">
<label for="pic-3" class="lightbox"><img src="large-3.jpg"></label>
<input type="checkbox" id="pic-4">
<label for="pic-4" class="lightbox"><img src="large-4.jpg"></label>
<input type="checkbox" id="pic-5">
<label for="pic-5" class="lightbox"><img src="large-5.jpg"></label>

Los estilos CSS principales para la galería de fotos.

* {

-moz-box-sizing: border-box;

box-sizing: border-box;
}

label[for] { cursor: pointer; }

.grid {

width: 100%;

position: fixed;

top: 0;

left: 0;

height: 100%;

background-color: #222;

z-index: 0;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-flex-wrap: wrap;

-ms-flex-wrap: wrap;

flex-wrap: wrap;

-webkit-align-items: flex-start;

-ms-flex-align: start;

align-items: flex-start;

-webkit-align-content: flex-start;

-ms-flex-line-pack: start;

align-content: flex-start;

padding: 16px;

overflow: auto;

text-align: center;

-webkit-transition: opacity .75s;

transition: opacity .75s;
}

.grid .grid-item {

width: 25%;

display: inline-block;

padding: 16px;

opacity: .75;

-webkit-transition: opacity .5s;

transition: opacity .5s;
}

.grid .grid-item:hover { opacity: 1; }

@media screen and (max-width: 1024px) {

.grid .grid-item { width: 50%; }

}

@media screen and (max-width: 480px) {

.grid .grid-item { width: 100%; }

}

.grid img {

max-width: 100%;

max-height: 100%;

box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

El CSS requerido para el lightbox de la imagen.

input[type="checkbox"] { display: none; }

.lightbox {

width: 100%;

position: fixed;

top: 0;

left: 0;

min-height: 100%;

z-index: 1;

overflow: auto;

-webkit-transform: scale(0);

-ms-transform: scale(0);

transform: scale(0);

-webkit-transition: -webkit-transform .75s ease-out;

transition: transform .75s ease-out;
}

.lightbox img {

position: fixed;

top: 50%;

left: 50%;

-webkit-transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

max-width: 96%;

max-height: 96%;

box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

input[type="checkbox"]:checked + .lightbox {

-webkit-transform: scale(1);

-ms-transform: scale(1);

transform: scale(1);
}

input[type="checkbox"]:checked ~ .grid { opacity: .125; }