Design a Parallax Webpage using HTML and CSS

How to Create Image Gallery using JavaScript?

Last Updated : 23 Jul, 2025

An Image Gallery is a collection of images displayed in a grid or slideshow format on a webpage. To create an Image Gallery using JavaScript, you can dynamically load images, create HTML elements, and use CSS for styling. JavaScript can add interactivity, like transitions and navigation controls.

Project Preview:

imageslider — Image Gallery

Step by Step Guide to Creating an Image Gallery

The Image Gallery will display all the image in small size and when you click on the particular image it will expand and you can see it in large size.
To create this we will first use the CSS grid property to make all the images in grid layout by creating a simple HTML structure.
After designing the basic HTML structure we will use CSS properties to make images responsive.
Now, we will use the CSS transform and cursor Zoom-in property, to view the image in full-size when you click on the particular image.

Note : If you want to build more Web Development Project check out - 30+ Web Development Projects with Source Code[2025]

How to Create Image Gallery using JavaScript?

Step 1: HTML Structure

Begin by creating the basic HTML structure for your image gallery page. Use semantic HTML tags to organize your content effectively. Here’s a sample structure:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Image Gallery</title>
</head>
<body>
    <!-- Heading Name -->
    <div class="heading">
        <h1>Image Gallery</h1>
    </div>
    <!-- Image Gallery section all images in one div -->
    <div class="gallery">
        <div class="gallery-item">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240311163321/Types-of-Wastes-(Banner).webp"
                onclick="openModal(
'https://media.geeksforgeeks.org/wp-content/uploads/20240311163321/Types-of-Wastes-(Banner).webp')"
                alt="Image 1">
        </div>
        <div class="gallery-item">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240311125007/Invertebrates-(Banner).webp"
                onclick="openModal(
'https://media.geeksforgeeks.org/wp-content/uploads/20240311125007/Invertebrates-(Banner).webp')"
                alt="Image 2">
        </div>
        <div class="gallery-item">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240311120816/GBlog-banner.webp"
                onclick="openModal(
'https://media.geeksforgeeks.org/wp-content/uploads/20240311120816/GBlog-banner.webp')"
                alt="Image 3">
        </div>
        <div class="gallery-item">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240308123700/Layers-of-Atmosphere-Banner-02.webp"
                onclick="openModal(
'https://media.geeksforgeeks.org/wp-content/uploads/20240308123700/Layers-of-Atmosphere-Banner-02.webp')"
                alt="Image 4">
        </div>
        <div class="gallery-item">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240307180031/List-of-Rocket-Launching-Stations-in-India---banner.webp"
                onclick="openModal(
'https://media.geeksforgeeks.org/wp-content/uploads/20240307180031/List-of-Rocket-Launching-Stations-in-India---banner.webp')"
                alt="Image 5">
        </div>
        <div class="gallery-item">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240215134226/Russia-Banner-copy-2.webp"
                onclick="openModal(
'https://media.geeksforgeeks.org/wp-content/uploads/20240215134226/Russia-Banner-copy-2.webp')"
                alt="Image 6">
        </div>
        <div class="gallery-item">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240226155245/girl-dog-names-banner.webp"
                onclick="openModal(
'https://media.geeksforgeeks.org/wp-content/uploads/20240226155245/girl-dog-names-banner.webp')"
                alt="Image 7">
        </div>
        <div class="gallery-item">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240215151423/Types-of-Microscope-(Banner).png"
                onclick="openModal(
'https://media.geeksforgeeks.org/wp-content/uploads/20240215151423/Types-of-Microscope-(Banner).png')"
                alt="Image 8">
        </div>
    </div>
    <!-- Modal for Image Display -->
    <div id="myModal" class="modal">
        <span class="close" onclick="closeModal()">&times;</span>
        <img class="modal-content" id="modalImage">
    </div>
    <!-- JavaScript for Modal -->
    <script>
        function openModal(src) {
            document.getElementById("modalImage").src = src;
            document.getElementById("myModal").style.display = "block";
        }
        function closeModal() {
            document.getElementById("myModal").style.display = "none";
        }
    </script>
</body>
</html>

Step 2: CSS Styling

Use CSS to make your gallery visually appealing and responsive. Apply grid layouts, adjust image sizes, and ensure proper alignment. Additionally, consider importing fonts for a polished look.

style.css

 .gallery {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
     gap: 10px;
     padding: 20px;
 }
 .gallery-item {
     overflow: hidden;
 }
 .gallery-item img {
     width: 100%;
     height: auto;
     display: block;
 }
 .modal {
     display: none;
     position: fixed;
     z-index: 1;
     padding-top: 100px;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     overflow: auto;
     background-color: rgba(0, 0, 0, 0.9);
 }
 .modal-content {
     margin: auto;
     display: block;
     max-width: 90%;
     max-height: 90%;
 }

 .close {
     position: absolute;
     top: 15px;
     right: 35px;
     color: #f1f1f1;
     font-size: 40px;
     font-weight: bold;
     transition: 0.3s;
 }

 .close:hover,
 .close:focus {
     color: #bbb;
     text-decoration: none;
     cursor: pointer;
 }

Step 3: JavaScript Functionality

Implement JavaScript to enhance user interaction. When users click on an image, expand it to full size. Here’s a simple example of how you can achieve this:

JavaScript

function openModal(imageSrc) {
    let modal = document.getElementById("myModal");
    let modalImg = document.getElementById("modalImage");
    modal.style.display = "block";
    modalImg.src = imageSrc;
}
function closeModal() {
    let modal = document.getElementById("myModal");
    modal.style.display = "none";
}

Output:

output — Image Gallery

How to Create Image Gallery using JavaScript?

Design a Parallax Webpage using HTML and CSS

B

bhartik021

Improve

Article Tags :

Similar Reads

How to Create a Website Using HTML and CSS?

Creating a website using HTML and CSS is a foundational skill if you are learning web development. HTML (HyperText Markup Language) is used to structure content, while CSS (Cascading Style Sheets) is used for styling, including colors, fonts, margins, and positioning. In this article, weâ€™ll go throu

Design a Tribute Page using HTML and CSS

Making a tribute page is an Innovative way to honor someone special in your life. In this article, we create a tribute webpage using HTML and CSS. This page has a simple and creative design. It contains a header with a title, a main section with text and images, and a footer for main details or cred

Build a Survey Form using HTML and CSS

Creating a survey form is a great way to understand the basics of web development. In this article, we will build a Survey Form that allows users to easily submit their responses. The form will include different input types such as text fields, checkboxes, and radio buttons, all designed using HTML

Design a Parallax Webpage using HTML and CSS

A parallax website includes fixed images in the background that are kept in place and the user can scroll down the page to see different parts of the image. In this article, we are creating a parallax webpage using HTML and CSS. We will use basic tags of HTML like div, paragraph, and heading to writ

Design an Event Webpage using HTML and CSS

Creating an event webpage is an exciting way to showcase information about an event, including its schedule, speakers, and contact details. What Weâ€™re Going to CreateWeâ€™ll create a webpage for a fictional event called "GeeksforGeeks TechCon 2025." This webpage will includeA header introducing the ev

Design a Webpage for online food delivery system using HTML and CSS

Creating your own online food delivery website is a great way to present a user-friendly platform for customers to browse and order food online. In this project, weâ€™ll design a simple yet effective food delivery website using HTML and CSS.What Weâ€™re Going to Create...Weâ€™ll develop a straightforward

Create a Homepage for Restaurant using HTML , CSS and Bootstrap

HTML: HTML stands for Hyper Text Markup Language. It is used to design web pages using a markup language. HTML is a combination of Hypertext and Markup language. Hypertext defines the link between the web pages. A markup language is used to define the text document within the tag which defines the s

How to create a Landing page using HTML CSS and JavaScript ?

A landing page, also referred to as a lead capture page, static page, or destination page, serves a specific purpose and typically appears as a result of online advertising or search engine optimization efforts. Unlike a homepage, a landing page is stripped of distractions and focuses on capturing v

Design a Webpage like Technical Documentation using HTML and CSS

In this article, we will design a webpage-style technical documentation using HTML and CSS, which accounts for nearly 30% of the structure and user experience in many educational and product-based websites. Technical documentation refers to structured content that describes the functionality, usage,

Create a Music Website Template using HTML, CSS & JavaScript

A Music Website Template is a pre-designed layout for creating a music-themed webpage. By utilizing HTML, CSS, and JavaScript, developers can craft a functional and visually appealing website with features like play/pause controls, sections for home, music, about, and contact.Step-by-Step Guide to c

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.

Alternative Proxies:

Alternative Proxy