Pure CSS Image Lightbox

Category: CSS & CSS3 , Modal & Popup | January 26, 2015
Author:ntluan
Views Total:2,632 views
Official Page:Go to website
Last Update:January 26, 2015
License:MIT

Preview:

Pure CSS Image Lightbox

Description:

A pure CSS lightbox which displays larger images in a fullscreen modal window.

How to use it:

Add the thumbnail to your web page as follow.

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

Add the large image to your web page as follow.

 <a href="#_" class="lightbox" id="img1"> 
   <img src="large.jpg"> 
 </a>

The core CSS for the image lightbox.

.lightbox {
  display: none;
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100%;
  text-align: center;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.8);
}

.lightbox img {
  max-width: 90%;
  max-height: 80%;
  margin-top: 2%;
}

.lightbox:target {
  outline: none;
  display: block;
}

You Might Be Interested In:


Leave a Reply