Author: | soanvig |
---|---|
Views Total: | 6,652 views |
Official Page: | Go to website |
Last Update: | September 26, 2015 |
License: | MIT |
Preview:

Description:
JesterBox is pure CSS implementation of a image viewer that displays your images into a fullscreen, responsive, modal-like popup window while maintaining aspect ratio and maintaining centering.
Basic usage:
Create a DIV container with an unique IDs for your image, and then wrap theme into an anchor link named ‘JesterBox’.
<a href="#" class="JesterBox"> <div id="image1"><img src="1.jpg"></div> <div id="image2"><img src="2.jpg"></div> <div id="image3"><img src="3.jpg"></div> <div id="image4"><img src="4.jpg"></div> <div id="image5"><img src="5.jpg"></div> </a>
Create anchor links pointing to these DIV IDs.
<a href="#image1">Image 1</a> <a href="#image2">Image 2</a> <a href="#image3">Image 3</a> <a href="#image4">Image 4</a> <a href="#image5">Image 5</a>
The Core CSS styles for the image viewer.
.JesterBox div { visibility: hidden; position: fixed; top: 5%; right: 5%; bottom: 5%; left: 5%; z-index: 75; text-align: center; display: flex; justify-content: center; align-items: center; } .JesterBox div:before { content: ''; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 74; background-color: rgba(0, 0, 0, 0); transition: all 0.5s ease-out; } .JesterBox div img { position: relative; z-index: 77; max-width: 100%; max-height: 100%; margin-left: -9999px; opacity: 0; transition-property: all, opacity; transition-duration: 0.5s, 0.2s; transition-timing-function: ease-in-out, ease-out; } .JesterBox div:target { visibility: visible; } .JesterBox div:target:before { background-color: rgba(0, 0, 0, 0.7); } .JesterBox div:target img { margin-left: 0px; opacity: 1; }