Skip to content
Related Articles
Open in App
Not now

Related Articles

How to Create a Tab Image Gallery ?

Improve Article
Save Article
  • Last Updated : 24 Jan, 2023
Improve Article
Save Article

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 ?


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!