How to Create Lightbox with HTML and CSS
How to Create Lightbox with HTML and CSS
In this tutorial you will learn how to create a simple and stylish Lightbox with the help of HTML and CSS. Here you learn about Lightbox, how to design Lightbox and where to use the Lightbox, etc.
Here we have provided you, two to three programming examples of Lightbox with programming output in different – different style, so, that you can understand better. You can copy our programming code for learning purpose.
Look below Demo of Lightbox then start Learning Tutorial;
CSS and HTML Lightbox
We use the CSS Lightbox in our web pages and websites to look outstanding and fantastic web contents, Lightbox is usually used in images contents, to look better.
A CSS lightbox provides a way to take a closer look at web content, it is most commonly used in images and text content also.
Lightbox is hidden by default value but it shown when we click a link and a button, it depends which you make lightbox link or button properties.
Now we make a simple Lightbox Programming example with HTML and CSS.
Look at below the Example to better understand.
Example of a Lightbox;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lightbox</title> <style type="text/css"> body{text-align: center; margin-top: 40px;} img{width: 100%; height: auto;} .lightbox{visibility: hidden; display: table; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgb(149, 250, 253);} .button-1{text-decoration: none; color: green; font-weight: bold; font-size: 30px;} .lightbox:target{ visibility: visible;} .lightbox-cont{ display: table-cell; vertical-align: middle; text-align: center;} .close{position: absolute; top: 20px; right: 15px; font-size: 20px; font-weight: 300; text-decoration: none; color: rgb(235, 255, 57); border: 2px solid rgb(245, 245, 245); border-radius: 10px; padding: 2px;} </style></head> <body> <button><a class="button-1" href="#example">Click to Show Image</a></button> <div class="lightbox" id="example"> <a href="#" class="close">CLOSE</a> <div class="lightbox-cont"> <img src="webimage5.jpg"> </div> </div> </body> </html> |
Output of above Programming Example in Video format;
In above programming, we used the :target pseudo-class to style the lightbox when it targeted.
And one property the we applied the visibility: visible
to declaration that show the lightbox.
The display: table property helps to horizontally and vertically center the lightbox content.
And also, you saw in output of above programming, we have also positioned the close button to the right side of the image and made the image responsive.
Slide Up and Down Effect Lightbox ,(Sliding Lightbox)
Now here create a sliding lightbox, when you click the Show button, then image will slide up and when you click the Close button the image will be sliding down.
To create the slide effect of lightbox we can use the top property. First use a positive value to put the lightbox above the top edge, then use the 0 value to cover the entire page. Look at below programming example to better understanding.
Programming Example of Sliding Effect of Lightbox;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lightbox</title> <style type="text/css"> body{text-align: center; margin-top: 40px;} img{width: 100%; height: auto;} .lightbox{ display: table; position: fixed; top: 100%; left: 0; width: 100%; height: 100%; background: rgb(149, 250, 253); transition-duration: 2s;} .button-1{text-decoration: none; color: green; font-weight: bold; font-size: 30px; font-family: cursive;} .lightbox:target{top: 0;} .close:hover{border: 2px green solid; color: red;} .lightbox-cont{ display: table-cell; vertical-align: middle; text-align: center;} .close{position: absolute; top: 20px; right: 15px; font-size: 20px; font-weight: 300; text-decoration: none; color: rgb(235, 255, 57); border: 2px solid rgb(245, 245, 245); border-radius: 10px; padding: 2px;} </style> </head> <body> <button><a class="button-1" href="#example">Click to Show Image</a></button> <div class="lightbox" id="example"> <a href="#" class="close">CLOSE</a> <divclass="lightbox-cont"> <img src="webimage5.jpg"> </div> </div> </body> </html> |
Output of above Programming Example;
Above programming example, you can see we used top: 100%; of lightbox to popup the image container. And popup transition-duration: 2s;, than we used lightbox: target {top: 0;}. You can copy our programming code to learning and using your own revision project.
Fade Effect Lightbox
Here we create fade effect lightbox, to create a face in effect we can use the opacity property instead of the visibility property.
Then use the transaction-duration property to specify the duration of the effecting time.
We should also use the z-index property to change the layer order of the element.
For better understanding look below the programming example with output of programming.
Programming Example of Fade Effect Lightbox;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lightbox</title> <style type="text/css"> body{text-align: center; margin-top: 40px;} img{width: 100%; height: auto;} .lightbox{ display: table; opacity: 0; position: fixed; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background: rgb(149, 250, 253); transition-duration: 3s;} .button-1{text-decoration: none; color: green; font-weight: bold; font-size: 30px; font-family: cursive;} .lightbox:target{ opacity: 1; z-index: 1;} .lightbox-cont{ display: table-cell; vertical-align: middle; text-align: center;} .close{position: absolute; top: 20px; right: 15px; font-size: 20px; font-weight: 300; text-decoration: none; color: rgb(235, 255, 57); border: 2px solid rgb(245, 245, 245); border-radius: 10px; padding: 2px;} .close:hover{border: 2px green solid; color: red;} </style> </head> <body> <button><a class="button-1" href="#example">Click to Show Image</a></button> <div class="lightbox" id="example"> <a href="#" class="close">CLOSE</a> <div class="lightbox-cont"> <img src="webimage5.jpg"> </div> </div> </body> </html> |
Output of above Programming Example;
You can see the programming output, how work the fade effect lightbox, it is fantastic for image web content.
If you can try to create this type of effect, then you can copy out code to apply your own revision project and learning project.
So, in this tutorial you learned about CSS Lightbox, you leaned how to create stylish and fantastic lightbox for your websites and webpages, and also you sow programming example of all the lightbox (Simple Lightbox, Sliding Effect Lightbox and Fade Effect Lightbox) with output of these programming.
I hope you read this tutorial better and learn something new form this. If you have any doubt, you can ask in the comment section.
NOTE: You can copy our programming code for learning purpose.
Read Also-
1 Comment
Joaquin Colschen · September 23, 2022 at 3:46 pm
What¦s Going down i’m new to this, I stumbled upon this I have found It positively helpful and it has aided me out loads. I’m hoping to give a contribution & assist different users like its aided me. Great job.