Pure CSS Fullscreen Lightbox with CSS3 Animations – lightbox.css

Preview:

Description:

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 ... 
</div>

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