How to create responsive image lightbox using only CSS3 transitions with 15 animation effects

This article considers a simple image lightbox with a minimal amount of code to demonstrate the simplest way on how to build it using only CSS3 transitions. It comes with 15 animation effects with a demo example for each one. It has a responsive design and works completely without JavaScript.

Nowadays, almost all image lightboxes are developed with the use of JavaScript as a main core for animation and its operation in general. It means that without JavaScript, it doesn't work at all.

The days when such kind of tasks can only be performed by means of JavaScript have passed. Recently, CSS3 has become able to cope with it as well. Of course there is no need to try to replace everything with CSS3 instead of JavaScript. There are many things which JavaScript can do better in more convenient and simple way. The main idea is to replace only those functions that can be performed better in CSS3 rather than in JavaScript.

CSS3 transitions are natively supported by all modern browsers which means they work faster than their analogs in JavaScript and contribute browser's performance.

Working principle

Operation principle of the image lightbox is based on using of two features of CSS3:

  1. The target selector that is used to show/hide the image lightbox when a certain link/button is clicked.
  2. The transition property that is used to create a smooth animation.

HTML structure

Open lightbox

 

As can be seen above, the HTML code of the image lightbox is very simple. The only thing that should be paid attention to is the your-lightbox-identifier identifier. The identifier must be unique for every lightbox on a webpage.

Base styles

.lightbox,
.lightbox * {
  box-sizing: border-box;
}

.lightbox {
  position: fixed;
  z-index: 999;
  top: 15px;
  left: 15px;
  bottom: 15px;
  right: 15px;
  text-align: center;
  visibility: hidden;
}

.lightbox:before {
  content: "";
  position: absolute;
  top: -15px;
  left: -15px;
  bottom: -15px;
  right: -15px;
  transition: all 500ms ease-out;
}

.lightbox img {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0px 0px 20px black;
  border: 5px solid white;
  max-width: 100%;
  max-height: 100%;
}

.lightbox:target {
  visibility: visible;
}

.lightbox:target:before {
  background-color: rgba(255, 255, 255, 0.85);
}

.lightbox:target:before {
  background-color: rgba(255, 255, 255, 0.85);
}

.lightbox .close {
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  width: 32px;
  height: 32px;
  background: black;
  box-shadow: 0px 0px 5px white;
}

.lightbox .close:before,
.lightbox .close:after {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  content: "";
  position: absolute;
  display: block;
  margin: auto;
  width: 32px;
  height: 0;
  border-top: 2px solid white;
  transform-origin: center;
}

.lightbox .close:before {
  transform: rotate(45deg);
}

.lightbox .close:after {
  transform: rotate(-45deg);
}

The styles above are basic for the image lightbox. They build everything except an animation.

Animation styles

This article provides examples of 2D animation effects which are divided into groups according to an animation effect similarity.

Fade in

The following styles add the animation effect:

.lightbox.fade-in img {
  transition: all 500ms ease-out;
}

.lightbox.fade-in img {
  opacity: 0;
}

.lightbox.fade-in:target img {
  opacity: 1;
}

The HTML code to demonstrate the animation effect:

Fade in

Rotate clockwise/counterclockwise

The following styles add the animation effect:

.lightbox.rotate-clockwise img,
.lightbox.rotate-counterclockwise img {
  transition: all 500ms ease-out;
}

.lightbox.rotate-clockwise img {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0) rotate(-360deg);
}

.lightbox.rotate-counterclockwise img {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0) rotate(360deg);
}

.lightbox.rotate-clockwise:target img,
.lightbox.rotate-counterclockwise:target img {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotate(0deg);
}

The HTML code to demonstrate the animation effect:

Rotate clockwise
Rotate counterclockwise

 

Zoom in/out

The following styles add the animation effect:

.lightbox.zoom-in img,
.lightbox.zoom-out img {
  transition: all 500ms ease-out;
}

.lightbox.zoom-in img {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
}

.lightbox.zoom-out img {
  opacity: 0;
  transform: translate(-50%, -50%) scale(3);
}

.lightbox.zoom-in:target img,
.lightbox.zoom-out:target img {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

The HTML code to demonstrate the animation effect:

Zoom in
Zoom out

 

Unfold horizontally/vertically

The following styles add the animation effect:

.lightbox.unfold-horizontally img,
.lightbox.unfold-vertically img {
  transition: all 500ms ease-out;
}

.lightbox.unfold-horizontally img {
  transform: translate(-50%, -50%) rotateY(90deg);
}

.lightbox.unfold-vertically img {
  transform: translate(-50%, -50%) rotateX(90deg);
}

.lightbox.unfold-horizontally:target img {
  transform: translate(-50%, -50%) rotateY(0deg);
}

.lightbox.unfold-vertically:target img {
  transform: translate(-50%, -50%) rotateX(0deg);
}

The HTML code to demonstrate the animation effect:

Unfold horizontally
Unfold vertically

 

Slide up/down/left/right/up & left/up & right/down & left/down & right

The following styles add the animation effect:

.lightbox.slide-up img,
.lightbox.slide-down img,
.lightbox.slide-left img,
.lightbox.slide-right img  {
  transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
}

.lightbox.slide-up img {
  top: 150%;
}

.lightbox.slide-down img {
  top: -50%;
}

.lightbox.slide-left img {
  left: -150%;
}

.lightbox.slide-right img {
  left: 150%;
}

.lightbox.slide-up:target img,
.lightbox.slide-down:target img {
  top: 50%;
}

.lightbox.slide-left:target img,
.lightbox.slide-right:target img {
  left: 50%;
}

The HTML code to demonstrate the animation effect:

Slide up
Slide down
Slide left
Slide right
Slide up & left
Slide up & right
Slide down & left
Slide down & right

 
 
 
 
 
 
 

Continue reading here: How to create pure CSS pricing tables

Was this article helpful?

+1 0