Pure CSS Animated Image Lightbox / Gallery – Perfundo

Preview:

Description:

Perfundo is a pure CSS lightbox library which present your single or multiple images  in a responsive, animated lightbox / gallery popup.

How to use it:

First you need to load the Perfundo.css (without icons) or perfundo-icons.css (with icons) into your html page.

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

Create a single image lightbox like this:

<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>

Create a gallery lightbox like this:

<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>

You can also open an image lightbox through an inline link.

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

Changelog:

08/16/2018

• v4.0.4