Pure CSS Image Lightbox

Category: CSS & CSS3 , Modal & Popup | January 26, 2015
Views Total:2,833 views
Official Page:Go to website
Last Update:January 26, 2015


Pure CSS Image Lightbox


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">

Add the large image to your web page as follow.

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

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