Author: | Cerealkillerway |
---|---|
Views Total: | 5,218 views |
Official Page: | Go to website |
Last Update: | January 5, 2016 |
License: | MIT |
Preview:

Description:
A simple, responsive galley lightbox for showcasing your favorite images, built using pure HTML and CSS. Clicking on the thumb will display all your images in a responsive, navigatable and closeable lightbox popup.
How to use it:
Add thumbnails and lightbox containers to your webpage.
<a href="#img1"> <img class="thumb" src="thumb-1.jpg"> </a> <!-- lightbox container hidden with CSS --> <div class="lightbox" id="img1"> <a href="#img3" class="light-btn btn-prev">prev</a> <a href="#_" class="btn-close">X</a> <img src="images/1.jpg"> <a href="#img2" class="light-btn btn-next">next</a> </div> <a href="#img2"> <img class="thumb" src="thumb-2.jpg"> </a> <!-- lightbox container hidden with CSS --> <div class="lightbox" id="img2"> <a href="#img1" class="light-btn btn-prev">prev</a> <a href="#_" class="btn-close">X</a> <img src="2.jpg"> <a href="#img3" class="light-btn btn-next">next</a> </div> <a href="#img3"> <img class="thumb" src="thumb-3.jpg"> </a> <!-- lightbox container hidden with CSS --> <div class="lightbox" id="img3"> <a href="#img2" class="light-btn btn-prev">prev</a> <a href="#_" class="btn-close">X</a> <img src="3.jpg"> <a href="#img1" class="light-btn btn-next">next</a> </div>
The core CSS styles.
.thumb { max-height: 171px; border: solid 6px rgba(5, 5, 5, 0.8); } .lightbox { position: fixed; z-index: 999; height: 0; width: 0; text-align: center; top: 0; left: 0; background: rgba(0, 0, 0, 0.8); opacity: 0; } .lightbox img { max-width: 90%; max-height: 80%; margin-top: 2%; opacity: 0; } .lightbox:target { /** Remove default browser outline */ outline: none; width: 100%; height: 100%; opacity: 1 !important; } .lightbox:target img { border: solid 17px rgba(77, 77, 77, 0.8); opacity: 1; webkit-transition: opacity 0.6s; transition: opacity 0.6s; } .light-btn { color: #fafafa; background-color: #333; border: solid 3px #777; padding: 5px 15px; border-radius: 1px; text-decoration: none; cursor: pointer; vertical-align: middle; position: absolute; top: 45%; z-index: 99; } .light-btn:hover { background-color: #111; } .btn-prev { left: 7%; } .btn-next { right: 7%; } .btn-close { position: absolute; right: 2%; top: 2%; color: #fafafa; background-color: #92001d; border: solid 5px #ef4036; padding: 10px 15px; border-radius: 1px; text-decoration: none; } .btn-close:hover { background-color: #740404; }