CSS Only Image Viewer – JesterBox

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;
}