Pure CSS Image Lightbox | CSS Script

Author: ntluan
Views Total: 2,802 views
Official Page: Go to website
Last Update: January 26, 2015
License: MIT


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;

See also  How to Remove WordPress Default Image Sizes

Leave a Reply

Your email address will not be published. Required fields are marked *