Open In App

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

Last Updated : 22 Dec, 2023
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.


  • 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.
  • Using the change function we will just replace the src of main_view with the source of the clicked image.

Example: This example shows the implementation of the above-explained approach.


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


<!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;

Output: Click here to see the live Output.

Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads