Article Categories

Selected Reading

How to create a tabbed image gallery with CSS and JavaScript?

CSS Web Development Front End Technology Javascript

A tabbed image gallery allows users to click on small thumbnail images to view them in a larger format. This creates an interactive way to display multiple images without taking up too much page space initially. Let us see how to create a tabbed image gallery using CSS and JavaScript.

Syntax

/* Basic thumbnail styling */
.thumbnail {
    cursor: pointer;
    transition: transform 0.3s;
}

/* Modal container */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
}

HTML Structure

First, we need to set up the HTML structure with thumbnail images and a modal container −

<img class="thumbnail" src="image1.jpg" alt="Image 1">
<img class="thumbnail" src="image2.jpg" alt="Image 2">
<img class="thumbnail" src="image3.jpg" alt="Image 3">

<div class="modal">
    <span class="close">&times;</span>
    <img class="modal-image" id="modalImg">
</div>

CSS Styling

The CSS handles the thumbnail appearance and modal overlay styling −

.thumbnail {
    width: 200px;
    height: 150px;
    margin: 10px;
    cursor: pointer;
    border-radius: 8px;
    transition: transform 0.3s ease;
    object-fit: cover;
}

.thumbnail:hover {
    transform: scale(1.05);
}

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
}

.modal-image {
    margin: 5% auto;
    display: block;
    max-width: 80%;
    max-height: 80%;
}

.close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: white;
    font-size: 40px;
    cursor: pointer;
}

JavaScript Functionality

The JavaScript adds click event listeners to handle opening and closing the modal −

// Get modal elements
const modal = document.querySelector('.modal');
const modalImg = document.querySelector('.modal-image');
const thumbnails = document.querySelectorAll('.thumbnail');
const closeBtn = document.querySelector('.close');

// Add click event to each thumbnail
thumbnails.forEach(thumb => {
    thumb.addEventListener('click', () => {
        modal.style.display = 'block';
        modalImg.src = thumb.src;
    });
});

// Close modal when clicking close button
closeBtn.addEventListener('click', () => {
    modal.style.display = 'none';
});

Complete Example

Here is a complete working example of a tabbed image gallery −

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        font-family: Arial, sans-serif;
        padding: 20px;
        background-color: #f5f5f5;
    }
    
    h1 {
        text-align: center;
        color: #333;
        margin-bottom: 30px;
    }
    
    .gallery {
        text-align: center;
        margin-bottom: 20px;
    }
    
    .thumbnail {
        width: 200px;
        height: 150px;
        margin: 10px;
        cursor: pointer;
        border-radius: 8px;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        object-fit: cover;
        border: 3px solid #ddd;
    }
    
    .thumbnail:hover {
        transform: scale(1.05);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    }
    
    .modal {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.8);
        backdrop-filter: blur(5px);
    }
    
    .modal-image {
        margin: 5% auto;
        display: block;
        max-width: 80%;
        max-height: 80%;
        border-radius: 10px;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
    }
    
    .close {
        position: absolute;
        top: 20px;
        right: 35px;
        color: white;
        font-size: 40px;
        font-weight: bold;
        cursor: pointer;
        transition: color 0.3s ease;
    }
    
    .close:hover {
        color: #ff6b6b;
    }
</style>
</head>
<body>
    <h1>Tabbed Image Gallery</h1>
    
    <div class="gallery">
        <img class="thumbnail" src="https://picsum.photos/400/300?random=1" alt="Nature 1">
        <img class="thumbnail" src="https://picsum.photos/400/300?random=2" alt="Nature 2">
        <img class="thumbnail" src="https://picsum.photos/400/300?random=3" alt="Nature 3">
    </div>
    
    <div class="modal">
        <span class="close">&times;</span>
        <img class="modal-image" id="modalImg">
    </div>
    
    <script>
        const modal = document.querySelector('.modal');
        const modalImg = document.querySelector('.modal-image');
        const thumbnails = document.querySelectorAll('.thumbnail');
        const closeBtn = document.querySelector('.close');
        
        // Add click event to each thumbnail
        thumbnails.forEach(thumb => {
            thumb.addEventListener('click', () => {
                modal.style.display = 'block';
                modalImg.src = thumb.src;
            });
        });
        
        // Close modal when clicking close button
        closeBtn.addEventListener('click', () => {
            modal.style.display = 'none';
        });
        
        // Close modal when clicking outside the image
        modal.addEventListener('click', (e) => {
            if (e.target === modal) {
                modal.style.display = 'none';
            }
        });
    </script>
</body>
</html>

A page displays with three thumbnail images arranged horizontally. When you click on any thumbnail, it opens in a larger modal overlay with a semi-transparent dark background. The modal includes a close button (×) in the top-right corner. Clicking the close button or outside the image closes the modal and returns to the thumbnail view.

Key Features

This tabbed image gallery includes several important features −

Hover effects − Thumbnails scale and show shadow on hover
Modal overlay − Dark semi-transparent background focuses attention on the enlarged image
Close functionality − Users can close the modal by clicking the × button or clicking outside the image
Responsive design − Images scale appropriately for different screen sizes
Smooth transitions − CSS transitions provide smooth hover and opening effects

Conclusion

Creating a tabbed image gallery with CSS and JavaScript provides an elegant way to display multiple images without cluttering the page. The combination of CSS styling for visual appeal and JavaScript for interactivity creates a professional-looking gallery that enhances user experience.

AmitDiwan

Updated on: 2026-03-15T14:24:30+05:30

838 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next