Open In App

How to Create a Tab Image Gallery ?

Improve
Improve
Like Article
Like
Save
Share
Report

To create a tab image gallery you need to use HTML, CSS, and JavaScript. HTML will make the structure of the body, and 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 the HTML section, we will create a basic website structure for the tab image gallery.

Designing Structure: In the CSS and JavaScript section we will design the structure for the tab image gallery and then change the picture effect on the tab image gallery using JavaScript. 

html




<!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="column">
            <span onclick=
                "this.parentElement.style.display='none'">
            </span>
              
            <img id="expand" style="width:70%; 
                height: 50%; margin-top: 15px;">
        </div>
    </div>
</body>
  
</html>


CSS




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


Javascript




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


Output: To check the live output click here

How to Create a Tab Image Gallery ?



Last Updated : 24 Jan, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads