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, 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 >
< 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>
h 1 {
color : green ;
}
.column {
float : left ;
width : 25% ;
padding : 10px ;
}
.column img {
opacity: 0.6 ;
cursor : zoom-in;
padding : 5px ;
}
.column img:hover {
opacity: 1 ;
transform: scale( 1.1 );
transition: 0.5 s;
}
.column img:active {
opacity: 1 ;
}
* {
box-sizing: border-box;
}
#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
Last Updated :
24 Jan, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...