Responsive Multipurpose Lightbox In Pure CSS – Leaf-Lightbox

Preview:

Description:

Leaf-Lightbox is a tiny CSS library used to create a beautiful responsive lightbox for images, text, and videos. Without any JavaScript and framework.

How to use it:

Include the core CSS file leafbox.css in the head section of the webpage.

<link type="text/css" rel="stylesheet" href="leafbox.css"/>

Include a theme CSS of your choice as follow:

<link rel="stylesheet" href="dist/theme/white.css"/>
<link rel="stylesheet" href="dist/theme/default.css"/>

Create a basic image lightbox with a fade animation. All available animations:

• fade
• bounce
• flip

<a href="#img1">
  <img src="1.jpg"/>
</a>

<figure id="img1" class="lbox fade">
   <img src="1.jpg"/>
   <a href="#_"></a>
</figure>

Display Youtube or Vimeo videos in the lightbox.

<a class="btn" href="#vid1">youtube</a>
<a class="btn" href="#vid2">vimeo</a>

<div id="vid1" class="lbox flip">
   <div class="vid">
   <iframe src="https://www.youtube.com/embed/m96tYpEk1Ao?autoplay=0&autohide=1&rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
   </div>
   <a href="#_"></a>
</div>
<div id="vid2" class="lbox bounce">
   <div class="vid">
   <iframe src="https://player.vimeo.com/video/68536792?title=0&byline=0&portrait=0" frameborder="0" allowfullscreen></iframe>
   </div>
   <a href="#_"></a>
</div>
</div>

Display a lightbox with custom text by clicking a trigger link.

<a class="btn" href="#text1">Click Me</a>
<div id="text1" class="lbox bounce">
   <div class="text">
       Text Here
   </div>
   <a href="#_"></a>
</div>