Pure CSS Fullscreen Lightbox with CSS3 Animations – lightbox.css

Category: CSS & CSS3 , Modal & Popup | September 10, 2015
Views Total:3,384 views
Official Page:Go to website
Last Update:September 10, 2015


Pure CSS Fullscreen Lightbox with CSS3 Animations – lightbox.css


A pure CSS solution to create responsive, animated, fullscreen lightbox / modal popups with CSS3 animations. Works on most modern web browsers which support CSS3 properties.

Basic usage:

Load the required lightbox.css stylesheet in the document’s head section.

<link rel="stylesheet" href="lightbox.css">

Add the ‘lightbox’ attribute to the modal container. The unique ID ‘lightbox-r’ means to slide out from the right side of your screen.

  • lightbox-r: from right to left
  • lightbox-l: from left to right
  • lightbox-b: from bottom to top
  • lightbox-t: from top to bottom
  • lightbox-inst: no animation
<div id="lightbox1-r" lightbox>
  <a href="#screenarea"></a>
  ... modal content here ... 

Create a link to toggle the lightbox.

<a href="#lightbox-r">Click me</a>

Change the animation speed:

  • Normal (lightbox=”norm” [default])
  • Fast (lightbox=”fast”)
  • Slow (lightbox=”slow”)
  • Instant (lightbox=”inst”)

You Might Be Interested In:

Leave a Reply