Pure CSS Image Lightbox

Preview:

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;
}