Open In App
Related Articles

How to preview Image on click in Gallery View using HTML, CSS and JavaScript ?

Improve Article
Save Article
Like Article

In this article, we see how easily we can create an Image Gallery with a preview feature using HTML, CSS, and some JavaScript.

Approach: We will follow the below-described approach


  • Create a div with a class container.
  • Create two more div inside the first div one for the main view and the other for the side view with classes main_view and side_view.
  • Inside the main view insert one image tag with the id main.
  • Inside the side view insert all other images of the gallery with function change and pass the src of the image to function.


  • Give width and margin to a container.
  • Give the height and width to a main_view.
  • Set the dimensions of the image in the main_view.
  • Set side_view to display all images in proper dimensions using flex.

JavaScript: Using the change function we will just replace the src of main_view with the source of the clicked image.


<!DOCTYPE html>
      <!-- Container for our gallery -->
    <div class="container">
        <!-- Main view of our gallery -->
        <div class="main_view">
            <img src="one.jpg" id="main" alt="IMAGE">
        <!-- All images with side view -->
        <div class="side_view">
            <img src="one.jpg" onclick="change(this.src)">
            <img src="two.jpg" onclick="change(this.src)">
            <img src="three.jpg" onclick="change(this.src)">
            <img src="four.jpg" onclick="change(this.src)">


/*Setting Basic Dimensions to give 
    gallery view */
.container {
    margin: 0 auto;
    width: 90%;
.main_view {
    width: 80%;
    height: 25rem;
.main_view img {
    width: 100%;
    height: 100%;
    object-fit: cover;
.side_view {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
.side_view img {
    width: 9rem;
    height: 7rem;
    object-fit: cover;
    cursor: pointer;
    margin: 0.5rem;


const change = src => {
    document.getElementById('main').src = src

Output: Click here to see the live Output.

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 17 Jan, 2023
Like Article
Save Article
Similar Reads
Complete Tutorials