Home / Articles / Programming languages / Markup languages / HTML & CSS / How to create responsive image lightbox using only CSS3 transitions with 15 animation effects

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

How to create responsive image lightbox using only CSS3 transitions with 15 animation effects
How to create responsive image lightbox using only CSS3 transitions with 15 animation effects
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


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

<a href="#your-lightbox-identifier">Open lightbox</a>

<div class="lightbox" id="your-lightbox-identifier">
  <img src="image.jpg">
  <a class="close" href="#"></a>
</div> 

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:

<a href="#fade-in-example">Fade in</a>

<div class="lightbox fade-in" id="fade-in-example">
  <img src="image.jpg">
  <a class="close" href="#"></a>
</div>

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:

<a href="#rotate-clockwise-example">Rotate clockwise</a>
<a href="#rotate-counterclockwise-example">Rotate counterclockwise</a>

<div class="lightbox rotate-clockwise" id="rotate-clockwise-example">
  <img src="image.jpg">
  <a class="close" href="#"></a>
</div>
<div class="lightbox rotate-counterclockwise" id="rotate-counterclockwise-example">
  <img src="image.jpg">
  <a class="close" href="#"></a>
</div>

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:

<a href="#zoom-in-example">Zoom in</a>
<a href="#zoom-out-example">Zoom out</a>

<div class="lightbox zoom-in" id="zoom-in-example">
  <img src="image.jpg">
  <a class="close" href="#"></a>
</div>
<div class="lightbox zoom-out" id="zoom-out-example">
  <img src="image.jpg">
  <a class="close" href="#"></a>
</div>

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:

<a href="#unfold-horizontally-example">Unfold horizontally</a>
<a href="#unfold-vertically-example">Unfold vertically</a>

<div class="lightbox unfold-horizontally" id="unfold-horizontally-example">
  <img src="image.jpg">
  <a class="close" href="#"></a>
</div>
<div class="lightbox unfold-vertically" id="unfold-vertically-example">
  <img src="image.jpg">
  <a class="close" href="#"></a>
</div>

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:

<a href="#slide-up-example">Slide up</a>
<a href="#slide-down-example">Slide down</a>
<a href="#slide-left-example">Slide left</a>
<a href="#slide-right-example">Slide right</a>
<a href="#slide-up-left-example">Slide up & left</a>
<a href="#slide-up-right-example">Slide up & right</a>
<a href="#slide-down-left-example">Slide down & left</a>
<a href="#slide-down-right-example">Slide down & right</a>

<div class="lightbox slide-up" id="slide-up-example">
  <img src="image.jpg">
  <a class="close" href="#"></a>
</div>
<div class="lightbox slide-down" id="slide-down-example">
  <img src="image.jpg">
  <a class="close" href="#"></a>
</div>
<div class="lightbox slide-left" id="slide-left-example">
  <img src="image.jpg">
  <a class="close" href="#"></a>
</div>
<div class="lightbox slide-right" id="slide-right-example">
  <img src="image.jpg">
  <a class="close" href="#"></a>
</div>
<div class="lightbox slide-up slide-left" id="slide-up-left-example">
  <img src="image.jpg">
  <a class="close" href="#"></a>
</div>
<div class="lightbox slide-up slide-right" id="slide-up-right-example">
  <img src="image.jpg">
  <a class="close" href="#"></a>
</div>
<div class="lightbox slide-down slide-left" id="slide-down-left-example">
  <img src="image.jpg">
  <a class="close" href="#"></a>
</div>
<div class="lightbox slide-down slide-right" id="slide-down-right-example">
  <img src="image.jpg">
  <a class="close" href="#"></a>
</div>

Live demo

The following archive contains all the examples above:



Read also

Animation in CSS3

Animation in CSS3

Log in or create a user account to post a comment.

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation