How To Design - Tab
Learn how to create Tab with HTML5, CSS3, and JavaScript
How To Create a Tab
Step 1) Add HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tab Design</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="images/favicon.png" type="image/png" sizes="16x16">
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,600,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Tab Content Changes on Mouse Hover</h1>
<div class="container">
<!-- Icons -->
<div class="icon">
<div class="imgBx active" data-id="content1">
<img src="img1G.png" alt="Google" title="Google">
</div>
<div class="imgBx" data-id="content2">
<img src="img2F.png" alt="Facebook" title="Facebook">
</div>
<div class="imgBx" data-id="content3">
<img src="img3T.png" alt="Twitter" title="Twitter">
</div>
<div class="imgBx" data-id="content4">
<img src="img4Y.png" alt="Yahoo" title="Yahoo">
</div>
</div>
<!-- Content -->
<div class="content">
<div class="contentBx active" id="content1">
<div>
<div class="text">
<h2>Google Text</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis repellat delectus labore expedita explicabo magni. Voluptate molestiae, sapiente alias itaque dolorum recusandae voluptatem perspiciatis, rerum vitae optio ad, aut deserunt. Nesciunt nam omnis ducimus ut hic? Quisquam delectus laboriosam et laudantium libero cupiditate quae odit illum est molestiae. Ex odit a pariatur maiores saepe nostrum ut voluptates, officiis quas aperiam obcaecati, iure quisquam repellendus cumque dignissimos rem.</p>
</div>
</div>
</div>
<div class="contentBx" id="content2">
<div>
<div class="text">
<h2>Facebook Text</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis repellat delectus labore expedita explicabo magni. Voluptate molestiae, sapiente alias itaque dolorum recusandae voluptatem perspiciatis, rerum vitae optio ad, aut deserunt. Nesciunt nam omnis ducimus ut hic? Quisquam delectus laboriosam et laudantium libero cupiditate quae odit illum est molestiae. Ex odit a pariatur maiores saepe nostrum ut voluptates, officiis quas aperiam obcaecati, iure quisquam repellendus cumque dignissimos rem.</p>
</div>
</div>
</div>
<div class="contentBx" id="content3">
<div>
<div class="text">
<h2>Instagram Text</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis repellat delectus labore expedita explicabo magni. Voluptate molestiae, sapiente alias itaque dolorum recusandae voluptatem perspiciatis, rerum vitae optio ad, aut deserunt. Nesciunt nam omnis ducimus ut hic? Quisquam delectus laboriosam et laudantium libero cupiditate quae odit illum est molestiae. Ex odit a pariatur maiores saepe nostrum ut voluptates, officiis quas aperiam obcaecati, iure quisquam repellendus cumque dignissimos rem.</p>
</div>
</div>
</div>
<div class="contentBx" id="content4">
<div>
<div class="text">
<h2>Twitter Text</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis repellat delectus labore expedita explicabo magni. Voluptate molestiae, sapiente alias itaque dolorum recusandae voluptatem perspiciatis, rerum vitae optio ad, aut deserunt. Nesciunt nam omnis ducimus ut hic? Quisquam delectus laboriosam et laudantium libero cupiditate quae odit illum est molestiae. Ex odit a pariatur maiores saepe nostrum ut voluptates, officiis quas aperiam obcaecati, iure quisquam repellendus cumque dignissimos rem.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Step 2) Add CSS
Download all the images which are used in this project.
/*
This is a Tab Design with HTML, CSS, and JavaScript. You can freely use it in your project.
It is made with ♥ by Learn Computer Academy.
Visit our website: www.learncomputer.in
*/
/* Normalization CSS */
*,
*::before,
*::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
font-size: 16px;
color: #000;
line-height: 1.2;
lighting-color: #fff;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 100vh;
}
h1 {
font-size: 2em;
color: #999;
line-height: 1.2;
padding: 0;
margin: 0 0 80px 0;
}
.container {
position: relative;
display: flex;
flex-wrap: wrap;
width: 1100px;
}
/* Icons CSS */
.container .icon {
position: relative;
width: 50%;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.container .icon .imgBx {
position: relative;
width: calc(50% - 40px);
margin: 0 30px 30px 0;
padding: 0 25px;
height: 140px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
border-radius: 4px;
transition: 0.5s;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.07);
}
.container .icon .imgBx.active {
box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
}
.container .icon .imgBx img {
max-width: 100%;
height: auto;
filter: grayscale(1);
transition: 0.5s;
transform: scale(0.8);
}
.container .icon .imgBx.active img {
transform: scale(1);
filter: grayscale(0);
}
/* Content CSS */
.content {
position: relative;
width: 50%;
overflow: hidden;
}
.content .contentBx {
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s;
transform: scale(0);
opacity: 0;
}
.content .contentBx.active {
transform: scale(1);
opacity: 1;
}
.content .contentBx h2 {
font-size: 3em;
color: #222;
line-height: 1.2;
padding: 0;
margin: 0 0 20px 0;
}
.content .contentBx p {
font-size: 1em;
color: #222;
line-height: 1.2;
padding: 0;
margin: 0;
}
Step 3) Add JavaScript:
<script>
var imgBx = document.querySelectorAll('.imgBx');
var contentBx = document.querySelectorAll('.contentBx');
for (var i = 0; i < imgBx.length; i++) {
imgBx[i].addEventListener('mouseover', function() {
for (var i = 0; i < contentBx.length; i++) {
contentBx[i].className = 'contentBx';
}
document.getElementById(this.dataset.id).className = 'contentBx active';
for (var i = 0; i < imgBx.length; i++) {
imgBx[i].className = 'imgBx';
}
this.className = 'imgBx active';
});
};
</script>