Image Lightbox & Gallery using HTML CSS

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 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.

 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

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 created a navigation bar with it. 

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 border: 1px solid #fff with each image which will enhance the beauty.

See the Pen Untitled by Code Media (@codemediaweb) on CodePen.

Hopefully, the demo has helped you find out how I created Image Lightbox Gallery. Above you will get the complete source code. If you are a beginner, you can follow the tutorial below or watch the video tutorial below the article. 

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.

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 class="wrapper">

  <div class="container">

<!-- images -->

<!-- navigation bar -->

 

   </div>  

</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 default image in slider

Now I have added an image in the box. This is basically 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 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 in size. 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.

#slide1:target, 

#slide2:target, 

#slide3:target, 

#slide4:target {

 font-size: 75px; opacity: 1;

}

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 fully understand how this CSS Lightbox Image Gallery was created. The download button below has the complete source code.

The download will start automatically