Responsive Multipurpose Lightbox In Pure CSS – Leaf-Lightbox

Category: CSS & CSS3 , Modal & Popup | June 9, 2016
Author: zkreations
Views Total: 3,701
Official Page: Go to website
Last Update: June 9, 2016
License: MIT

Preview:

Responsive Multipurpose Lightbox In Pure CSS – Leaf-Lightbox

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>

You Might Be Interested In:


One thought on “Responsive Multipurpose Lightbox In Pure CSS – Leaf-Lightbox

Leave a Reply