How to create an image lightbox using CSS? You can easily create using this Image Lightbox In Pure CSS program.
Image lightbox is an overlay window that goes over the website and shows a picture. You must have seen these types of effect before on many websites. Now every website use image lightbox, In WordPress this is an inbuilt feature. Basically, this program is for showing an image’s actual size which is optimized on the webpage.
Example: suppose an image size is 1200*1200, We can put this image on the website with its actual size. So, we can put an image with a small dimension, then the image’s size and quality become reduced. But using image lightbox when you will click on small size image there will appear window overlay with actual size image.
Basically, these types of lightbox mostly built with JavaScript, jQuery or any other JS library. But today I will show you how we can create Image Lightbox in Pure CSS, without JavaScript. This program is very basic and easy to understand for beginners. This program is simple but its look not, see this preview given below how this Pure CSS Lightbox looks like.
Preview Of This Program
Let’s see this video preview to know how this program looks.
Now you can see this program visually. If you like this then get the source code of it.
You May Also Like:
Image Lightbox In Pure CSS Source Code
As always, Before sharing source code I want to say something about this program. This Lightbox program is in Pure CSS and HTML. I created this program using a CSS :target command. Previously I shared some Pure CSS program you can see. Images in this program I upload in my website and put the link in the program.
You have to create only 2 files for creating this program. One for HTML, One for CSS. Follow the steps to create this program without any error or trouble.
index.html
Create an HTML file named ‘index.html‘ and put these codes given here below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<!DOCTYPE html> <!-- code by webdevtrick ( https://webdevtrick.com ) --> <html> <head> <title>Image Light-Box in Pure CSS</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>Pure CSS Light-Box</h1> <p id="prova">Click on any image to display the lightbox</p> <a href="#img1"> <img class="thumb" src="https://webdevtrick.com/wp-content/uploads/b47sample1.jpg"> </a> <!-- first image box webdevtrick.com --> <div class="lightbox" id="img1"> <a href="#img3" class="light-btn btn-prev">prev</a> <a href="#_" class="btn-close">X</a> <img src="https://webdevtrick.com/wp-content/uploads/b47sample1.jpg"> <a href="#img2" class="light-btn btn-next">next</a> </div> <a href="#img2"> <img class="thumb" src="https://webdevtrick.com/wp-content/uploads/b47sample2.jpg"> </a> <!-- second image box webdevtrick.com --> <div class="lightbox" id="img2"> <a href="#img1" class="light-btn btn-prev">prev</a> <a href="#_" class="btn-close">X</a> <img src="https://webdevtrick.com/wp-content/uploads/b47sample2.jpg"> <a href="#img3" class="light-btn btn-next">next</a> </div> <a href="#img3"> <img class="thumb" src="https://webdevtrick.com/wp-content/uploads/b47sample3.jpg"> </a> <!-- third image box webdevtrick.com --> <div class="lightbox" id="img3"> <a href="#img2" class="light-btn btn-prev">prev</a> <a href="#_" class="btn-close">X</a> <img src="https://webdevtrick.com/wp-content/uploads/b47sample3.jpg"> <a href="#img1" class="light-btn btn-next">next</a> </div> <p class="footer">Code By <a href="https://webdevtrick.com">Webdevtrick.com</a></p> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 |
/* code by webdevtrick ( https://webdevtrick.com ) */ html, body { font-family: arial; padding: 0 2em; font-size: 18px; background: #111; color: #aaa; text-align:center; margin-top: 50px;; } h1 { font-size: 3em; font-weight: 100; color: white; } p { font-weight: 100; color: #888; margin-bottom: 45px; } .footer { margin-top: 80px; } .footer a { text-decoration: none; font-weight: 900; color: #56ADFF; } a { text-decoration: none; } .thumb { max-height: 171px; border: solid 6px white; } .lightbox { position: fixed; z-index: 999; height: 0; width: 0; text-align: center; top: 0; left: 0; background: rgba(0, 0, 0, 0.8); opacity: 0; } .lightbox img { max-width: 90%; max-height: 80%; margin-top: 2%; opacity: 0; } .lightbox:target { outline: none; width: 100%; height: 100%; opacity: 1 !important; } .lightbox:target img { border: solid 17px white; opacity: 1; webkit-transition: opacity 0.6s; transition: opacity 0.6s; } .light-btn { color: #fafafa; background-color: #333; border: solid 3px white; padding: 5px 15px; border-radius: 1px; text-decoration: none; cursor: pointer; vertical-align: middle; position: absolute; top: 45%; z-index: 99; } .light-btn:hover { background-color: #111; } .btn-prev { left: 7%; } .btn-next { right: 7%; } .btn-close { position: absolute; right: 2%; top: 2%; color: #fafafa; background-color: red; border: solid 5px white; padding: 10px 15px; border-radius: 1px; text-decoration: none; } .btn-close:hover { background-color: #740404; } |
That’s It. Now you have successfully created Image Lightbox In Pure CSS program. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
This gallery works fine in desktop but not in mobile view
The comment left by Harsha nearly put me off, so I looked at the code and realised that it would work perfectly on a mobile, you would just need to restyle it using CSS, so it would better fit.