Author: | ntluan |
---|---|
Views Total: | 2,802 views |
Official Page: | Go to website |
Last Update: | January 26, 2015 |
License: | MIT |
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; }