How to Create a Tab Image Gallery ?


To create a tab image gallery you need to use HTML, CSS, and JavaScript. HTML will make the structure of the body, CSS will make it looks good. This kind of tab image gallery looks attractive on a website. By using JavaScript you can easily change the displayed pictures from the gallery.

Creating Structure: In this section, we will create a basic website structure for the tab image gallery.

  • HTML code to make the structure:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <meta name="viewport"
            content="width=device-width, initial-scale=1">
        <title>
            How To Create a Tab Image Gallery
        </title>
    </head>
      
    <body>
        <div style="text-align:center">
            <h1>GeeksforGeeks</h1>
              
            <h4>A Computer Science Portal for Geeks</h4>
            <p>Tab Image Gallery</p>
        </div>
      
        <!-- gallery pic -->
        <div class="row">
            <div id="geeks">
                Here the Photo will be displayed
            </div>
      
            <div class="column">
                <img src=
                    style="width:100%" onclick="gfg(this);">
                <img src=
                    style="width:100%" onclick="gfg(this);">
                <img src=
                    style="width:100%" onclick="gfg(this);">
            </div>
      
            <div class="coloumn">
                <span onclick=
                    "this.parentElement.style.display='none'">
                </span>
                  
                <img id="expand" style="width:70%; 
                    height: 50%; margin-top: 15px;">
            </div>
        </div>
    </body>
      
    </html>

    chevron_right

    
    

Designing Structure: In the previous section, we have created the structure of the basic website. In this section, we will design the structure for the tab image gallery and then changing the picture effect on the tab image gallery using JavaScript.

  • CSS code to look good the structure:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <style>
        h1 {
            color: green;
        }
        
        /* column pic */
        .column {
            float: left;
            width: 25%;
            padding: 10px;
        }
        
        /* Style the images of gallery */
        .column img {
            opacity: 0.6;
            cursor: zoom-in;
            padding: 5px;
        }
          
        .column img:hover {
            opacity: 1;
            transform: scale(1.1);
            transition: 0.5s;
        }
          
        .column img:active {
            opacity: 1;
        }
        
        * {
            box-sizing: border-box;
        }
          
        /* Expanding image text */
        #geeks {
            position: absolute;
            left: 200px;
            padding-top: 100px;
            font-size: 28px;
            color: #EFECE9;
        }
          
        #geeks:hover {
            color: #ADE3BD;
            cursor: wait;
        }
    </style>

    chevron_right

    
    

  • JavaScript code for the animation on the gallery:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <script>
        function gfg(imgs) {
            var expandImg = document.getElementById("expand");
            var imgText = document.getElementById("geeks");
            expandImg.src = imgs.src;
            imgText.innerHTML = imgs.alt;
            expandImg.parentElement.style.display = "block";
        }
    </script>

    chevron_right

    
    

Combining the HTML, CSS, and JavaScript code: This example is the combination of the above sections.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <title>
        How To Create a Tab Image Gallery
    </title>
    <style>
        h1 {
            color: green;
        }
      
        /* column pic */
        .column {
            float: left;
            width: 25%;
            padding: 10px;
        }
      
        /* Style the images of gallery */
        .column img {
            opacity: 0.6;
            cursor: zoom-in;
            padding: 5px;
        }
          
        .column img:hover {
            opacity: 1;
            transform: scale(1.1);
            transition: 0.5s;
        }
          
        .column img:active {
            opacity: 1;
        }
      
        * {
            box-sizing: border-box;
        }
          
        /* Expanding image text */
        #geeks {
            position: absolute;
            left: 200px;
            padding-top: 100px;
            font-size: 28px;
            color: #EFECE9;
        }
          
        #geeks:hover {
            color: #ADE3BD;
            cursor: wait;
        }
    </style>
</head>
  
<body>
  
    <div style="text-align:center">
        <h1>GeeksforGeeks</h1>
        <h4>A Computer Science Portal for Geeks</h4>
        <p>Tab Image Gallery</p>
    </div>
  
    <!-- gallery pic -->
    <div class="row">
        <div id="geeks">Here the Photo will be displayed</div>
  
        <div class="column">
            <img src=
                style="width:100%" onclick="gfg(this);">
            <img src=
                style="width:100%" onclick="gfg(this);">
            <img src=
                style="width:100%" onclick="gfg(this);">
        </div>
  
        <div class="coloumn">
            <span onclick="this.parentElement.style.display='none'"></span>
            <img id="expand" style="width:70%; 
                                    height: 50%; 
                                    margin-top: 15px;">
        </div>
    </div>
    <script>
        function gfg(imgs) {
            var expandImg = document.getElementById("expand");
            var imgText = document.getElementById("geeks");
            expandImg.src = imgs.src;
            imgText.innerHTML = imgs.alt;
            expandImg.parentElement.style.display = "block";
        }
    </script>
</body>
  
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.