Here you will learn how to create Lightbox Image Gallery using HTML and CSS. Earlier I shared with you the design of many more types of image lightbox galleries. But in that case, I was with the help of JavaScript or JQuery. This Simple Image Lightbox Gallery was created with the help of CSS and HTML only.
This type of image gallery helps to organize a large number of images. Only four images are used, but you can increase or decrease the size of the image as you wish. If you are looking for good wallpapers then Wallpics is best for you
There is a display for viewing the images and there is a navigation bar. The images will be listed in the navigation bar. If you click on the images in the navbar, they can be seen in the display.
CSS Lightbox Image Gallery
<div> <p>To create this CSS Lightbox Image Gallery you need to have a basic idea about HTML and CSS. First I made a box in which the image can be seen. I have <a href="https://foolishdeveloper.com/2021/06/sidebar-menu-using-html-css-javascript.html" target="_blank" rel="noopener"><span style="color: #2b00fe;">created a navigation bar</span></a> with it.</p> <p>Here I have used four images. Moving or clicking on the images will cause a slight change in the images. And that image can be seen on the big display. I used <u>border: 1px solid #fff</u> with each image which will enhance the beauty.</p> </div>
Image Gallery Codepen:
See the Pen Untitled by Code Media (@codemediaweb) on CodePen.
HTML Structure:
<div style="text-align: left;"> <p>Hopefully, the demo has helped you find out how I <b>created Image Lightbox Gallery</b>. Above you will get the <span style="color: #2b00fe;">complete source code</span>. If you are a beginner, you can follow the tutorial below or watch the video tutorial below the article.</p> <p>I have shared with you a video tutorial that will help you to know completely. First, you create an HTML and CSS file then follow the steps below.</p> </div>
Step 1: Basic structure of Image Lightbox
The basic structure of the image gallery has been created using the following codes. First I made a big box for which the following codes helped.
<div style="text-align: left;"> <p>Hopefully, the demo has helped you find out how I <b>created Image Lightbox Gallery</b>. Above you will get the <span style="color: #2b00fe;">complete source code</span>. If you are a beginner, you can follow the tutorial below or watch the video tutorial below the article.</p> <p>I have shared with you a video tutorial that will help you to know completely. First, you create an HTML and CSS file then follow the steps below.</p> </div>
The following CSS has helped to design the webpage.
body {
font-family: Arial, Helvetica, sans-serif;
font-weight: 100;
background: #e9ebeb;
margin-left: 130px;
margin-top: 50px;
-webkit-transform: translate3D(0, 0, 0);
}The following codes have helped to design the HTML codes above. Here box width: 500px and height: 300px are used.
.wrapper {
width: 500px;
margin: 0 auto;
}
.container {
position: relative;
top: 0;
left: 0;
width: 500px;
height: 300px;
margin: 0;
padding: 0;
background: #282929;
box-shadow: 0px 0px 40px rgba(0,0,0,0.6);
border: 1px solid #fff;
}
Step 2: Add the default image in the slider
Now I have added an image in the box. This is the default image that can be found in the box. If you click on the image in the navbar, this image will be hidden and that image will be seen.
<div id="start"><img src="img1.jpg" alt=""></div>
#start {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
opacity: 1;
font-size: 75px;
background:-webkit-linear-gradient(#00aff9,#0086c3);
background: linear-gradient(#00aff9,#0086c3);
color: #342c2a;
-webkit-animation: slide 1.5s ease-in-out forwards;
animation: slide 1.5s ease-in-out forwards;
}
Step 3: Add all images to the Gallery
Now I have added other images to the image gallery. As I said before I used four photos here. If you want to increase the number of images, you can add those images here.
<div id="slide1"><img src="img1.jpg" alt=""></div> <div id="slide2"><img src="img2.jpg" alt=""></div> <div id="slide3"><img src="img3.jpg" alt=""></div> <div id="slide4"><img src="img4.jpg" alt=""></div>
#slide1, #slide2, #slide3, #slider4 {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
opacity: 0;
background:-webkit-linear-gradient(#00aff9,#0086c3);
background: linear-gradient(#00aff9,#0086c3);
color: #342c2a;
font-size: 75px;
}
img {
text-align: center;
margin: 0;
height: 300px;
width: 500px;
}Step 4: Create a navbar in Lightbox Gallery
Now we have created a navigation bar in which a list of images can be found. This navbar is 140px left from the original slider.
<div class="navigation">
<li>
<div class="btn">
<a href="#slide1"><img src="img1.jpg" alt=""></a>
</div>
</li>
<li>
<div class="btn">
<a href="#slide2"><img src="img2.jpg" alt=""></a>
</div>
</li>
<li>
<div class="btn">
<a href="#slide3"><img src="img3.jpg" alt=""></a>
</div>
</li>
<li>
<div class="btn">
<a href="#slide4"><img src="img4.jpg" alt=""></a>
</div>
</li>
</div>.navigation {
position: absolute;
bottom: 0px;
left: -140px;
margin: 0;
padding: 0;
}
li{
color: transparent;
}The images here are width: 120px and height: 63px.
btn {
float: left;
margin: 6px;
width: 120px;
height: 63px;
text-align: center;
border: 1px solid #fff;
box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
-webkit-transition: 0.1s ease-in;
transition: 0.1s ease-in;
}
.btn a img {
display: block;
text-decoration: none;
height: 63px;
width: 120px;
letter-spacing: 2px;
font-size: 12px;
}
Now I have added hover in these images. When you mouse over or click on these images, the images will be slightly larger. For this transform: scale (1.2) help has been taken.
.btn:hover {
-webkit-transition: 0.1s ease-in;
transition: 0.1s ease-in;
-webkit-transform: scale(1.2);
transform: scale(1.2);
background: #00aff9;
}
Step 5: Activate Lightbox Image Gallery with CSS
Now I have fully implemented Image Night using “: target”. When you click on the image, that image can be seen in the display. I have used opacity: 1 for this to help you see and the font-size image can be seen in the full display.
<div class="class">
<div class="class">#slide1:target,</div>
<div class="class">#slide2:target,</div>
<div class="class">#slide3:target,</div>
<div class="class">#slide4:target {</div>
<div class="class"> font-size: 75px; opacity: 1;</div>
<div class="class">}</div>
</div>I hope you learned from this tutorial how I created Lightbox Image Gallery using HTML and CSS. If you want, you can make this project with the help of JavaScript. Below is the video tutorial of this CSS Image Lightbox Gallery.
Hopefully the above video and tutorial have helped you to understand how this CSS Lightbox Image Gallery was created fully. The download button below has the complete source code.
