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:
- The target selector that is used to show/hide the image lightbox when a certain link/button is clicked.
- 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?