How can I create a CSS-only image gallery with thumbnails and lightbox?
Rashid D

To create a CSS-only image gallery with thumbnails and a lightbox effect, you can leverage CSS techniques such as checkboxes, labels, and the:target pseudo-class. This approach allows you to achieve the desired functionality without relying on JavaScript. Here's a step-by-step guide on how to create a CSS-only image gallery: 1. HTML Structure:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
  <div class="gallery">
     <input type="radio" name="gallery" id="image1" checked>
     <input type="radio" name="gallery" id="image2">
     <input type="radio" name="gallery" id="image3">

     <div class="thumbnails">
       <label for="image1"></label>
       <label for="image2"></label>
       <label for="image3"></label>
     </div>

     <div class="lightbox">
       <label class="close" for="image1"></label>
       <label class="close" for="image2"></label>
       <label class="close" for="image3"></label>
       <div class="content">
         <img src="path/to/image1.jpg" alt="Image 1">
         <img src="path/to/image2.jpg" alt="Image 2">
         <img src="path/to/image3.jpg" alt="Image 3">
       </div>
     </div>
   </div>

In this example, we have a container div with the classgallery. Inside the container, we define a set of radio inputs for each image, represented by theinput elements. Thename attribute ensures that only one image can be selected at a time. The labels for the inputs are used as thumbnails in the gallery. The lightbox effect is achieved by wrapping the images in adiv with the classlightbox. Thelabel elements with the classclose act as close buttons to exit the lightbox. 2. CSS Styling:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 .gallery {
     /* Gallery container styles */
   }

   .thumbnails {
     /* Styles for the thumbnail container */
   }

   .thumbnails label {
     /* Styles for the thumbnail labels */
   }

   .lightbox {
     /* Styles for the lightbox container */
   }

   .lightbox .content {
     /* Styles for the lightbox content */
   }

   .lightbox .close {
     /* Styles for the close buttons */
   }

Customize the CSS styles according to your design requirements. The.gallery class represents the container for the image gallery..thumbnails styles the container for the thumbnail labels..lightbox styles the container for the lightbox, and.content styles the content area within the lightbox. Use.close to style the close buttons. 3. Lightbox and Thumbnail Interactions:

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
 .lightbox {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: rgba(0, 0, 0, 0.8);
     visibility: hidden;
     opacity: 0;
     transition: visibility 0s linear 0.2s, opacity 0.2s;
     z-index: 9999;
   }

   .lightbox:target {
     visibility: visible;
     opacity: 1;
     transition-delay: 0s;
   }

   .thumbnails label {
     display: inline-block;
     width: 100px;
     height: 75px;
     background-size: cover;
     background-position: center;
     cursor: pointer;
   }

   .thumbnails label:hover {
     border-color: #fff;


   }

   .lightbox .content {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100%;
   }

   .lightbox img {
     max-width: 90%;
     max-height: 90%;
   }

   .close {
     position: absolute;
     top: 10px;
     right: 10px;
     width: 30px;
     height: 30px;
     background: url(path/to/close-icon.png) no-repeat center center;
     cursor: pointer;
   }

The.lightbox class defines the base styles for the lightbox, including positioning and transition effects. The:target pseudo-class is used to make the lightbox visible when the corresponding image radio input is targeted. The.thumbnails label styles define the appearance of the thumbnail labels, while the.lightbox .content styles center the image within the lightbox. The.close class positions the close button and sets the background image for the button. 4. Customize the Thumbnail Images and Close Button:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 .thumbnails label[for="image1"] {
     background-image: url(path/to/thumbnail1.jpg);
   }

   .thumbnails label[for="image2"] {
     background-image: url(path/to/thumbnail2.jpg);
   }

   .thumbnails label[for="image3"] {
     background-image: url(path/to/thumbnail3.jpg);
   }

   .close[for="image1"] {
     background-image: url(path/to/close-icon1.png);
   }

   .close[for="image2"] {
     background-image: url(path/to/close-icon2.png);
   }

   .close[for="image3"] {
     background-image: url(path/to/close-icon3.png);
   }

Customize the background images for the thumbnail labels and the close buttons. Each label and close button is associated with a specific image radio input using thefor attribute. With these steps, you have created a CSS-only image gallery with thumbnails and a lightbox effect. When a thumbnail is clicked, the corresponding image will be displayed in a full-screen lightbox. The lightbox can be closed by clicking the close button or outside the lightbox area. Customize the HTML structure, CSS styles, and images as per your specific requirements to create the desired image gallery.

Similar Questions