Sólo visor de imágenes CSS-JesterBox

Vista prévia

Descripción

JesterBox es una implementación de CSS pura de un visor de imágenes que muestra sus imagenes en una ventana emergente de pantalla completa, responsiva y modal, mientras mantiene la relación de aspecto y mantiene centrado.

¿Cómo funciona?

Cree un contenedor DIV con identificadores únicos para la imagen y, a continuación, ajuste el tema en un vínculo de anclaje denominado "JesterBox".

<a href="#" class="JesterBox">

<div id="image1"><img src="1.jpg"></div>

<div id="image2"><img src="2.jpg"></div>

<div id="image3"><img src="3.jpg"></div>

<div id="image4"><img src="4.jpg"></div>

<div id="image5"><img src="5.jpg"></div>
</a>

Cree vínculos de anclaje que apunten a estos identificadores DIV.

<a href="#image1">Image 1</a>
<a href="#image2">Image 2</a>
 <a href="#image3">Image 3</a>
 <a href="#image4">Image 4</a>
 <a href="#image5">Image 5</a>

Los estilos CSS principales para el visor de imágenes.

.JesterBox div {

visibility: hidden;

position: fixed;

top: 5%;

right: 5%;

bottom: 5%;

left: 5%;

z-index: 75;

text-align: center;

display: flex;

justify-content: center;

align-items: center;
}

.JesterBox div:before {

content: '';

position: fixed;

top: 0;

right: 0;

bottom: 0;

left: 0;

z-index: 74;

background-color: rgba(0, 0, 0, 0);

transition: all 0.5s ease-out;
}

.JesterBox div img {

position: relative;

z-index: 77;

max-width: 100%;

max-height: 100%;

margin-left: -9999px;

opacity: 0;

transition-property: all, opacity;

transition-duration: 0.5s, 0.2s;

transition-timing-function: ease-in-out, ease-out;
}

.JesterBox div:target { visibility: visible; }

.JesterBox div:target:before { background-color: rgba(0, 0, 0, 0.7); }

.JesterBox div:target img {

margin-left: 0px;

opacity: 1;
}