Pure CSS imagen animada lightbox/Gallery-Perfundo

Vista prévia

Descripción

Perfundo es una biblioteca de lightbox CSS pura que presenta sus imágenes únicas o múltiples en una ventana emergente de lightbox/Galería animada y interactiva.

Funcionamiento

Primero necesitas cargar el Perfundo. CSS (sin iconos) o perfundo-Icons. CSS (con iconos) en tu página HTML.

<link href="dist/perfundo-icons.css" rel="stylesheet">

Cree una sola caja de luz de imagen como esta:

<div class="perfundo">

<style>

#perfundo-single:target:before{background-image:url(large.jpg);}

</style>

<a class="perfundo__link" href="#perfundo-single"> <img src="small.jpg"> </a>

<div id="perfundo-single" class="perfundo__overlay"> <a href="#perfundo-untarget" class="perfundo__close perfundo__control">Close</a> </div>
</div>

Crea un lightbox de Galería como este:

<div class="perfundo">

<style>#perfundo-img1:target:before{background-image:url(1.jpg);}</style>

<a class="perfundo__link" href="#perfundo-img1">


<img src="1.jpg">

</a>

<div id="perfundo-img1" class="perfundo__overlay">


<a href="#perfundo-untarget" class="perfundo__close perfundo__control">Close</a>


<a class="perfundo__next perfundo__control" href="#perfundo-img2">Next</a>

</div>
</div>

<div class="perfundo">

<style>#perfundo-img2:target:before{background-image:url(2.jpg);}</style>

<a class="perfundo__link" href="#perfundo-img2">


<img src="2.jpg">

</a>

<div id="perfundo-img2" class="perfundo__overlay">


<a href="#perfundo-untarget" class="perfundo__close perfundo__control">Close</a>


<a class="perfundo__next perfundo__control" href="#perfundo-img3">Next</a>


<a class="perfundo__prev perfundo__control" href="#perfundo-img1">Prev</a>

</div>
</div>

<div class="perfundo">

<style>#perfundo-img3:target:before{background-image:url(3.jpg);}</style>

<a class="perfundo__link" href="#perfundo-img3">


<img src="3.jpg">

</a>

<div id="perfundo-img3" class="perfundo__overlay">


<a href="#perfundo-untarget" class="perfundo__close perfundo__control">Close</a>


<a class="perfundo__prev perfundo__control" href="#perfundo-img2">Prev</a>

</div>
</div>

También puede abrir un lightbox de imagen a través de un enlace en línea.

<a href="#perfundo-single">Open an image lightbox</a>

Registro de cambios

08/16/2018

• v4.0.4