If you’re interested in learning how to create a clean and efficient Mega and Dropdown Menu using only HTML & CSS, you’re in the right place! In this tutorial, we will walk through how to build a fully functional mega and dropdown menu navigation bar using just HTML and CSS—no JavaScript needed!
Mega and Dropdown Menu are becoming increasingly popular on websites with complex structures or multiple categories. In contrast, a dropdown menu is a simpler form of navigation. Combining both in a responsive menu ensures that your visitors enjoy a smooth user experience, regardless of their device.
Whether you’re a beginner or a seasoned developer, this guide will help you design a visually appealing, responsive menu for your site. We’ll explore the essential HTML structure, CSS styling, and how to ensure your navigation bar looks great on all devices.
What is a Responsive Mega and Dropdown Menu?
A Responsive Mega and Dropdown Menu is a website navigation system that combines the simplicity of a dropdown menu with the functionality of a mega menu. A dropdown menu displays a list of items when you hover or click on a parent link. In contrast, a mega menu presents multiple columns of links and additional content like categories or product lists.
When built with pure HTML and CSS, these menus become lightweight, fast-loading, and compatible across browsers without needing JavaScript.
Benefits of Using Only HTML & CSS
Building a Responsive Mega and Dropdown Menu using only HTML and CSS offers several advantages:
- Performance: HTML and CSS menus are lightweight and don’t require heavy JavaScript libraries, ensuring fast load times for your website.
- SEO: Search engines can easily crawl and index HTML content, improving your website’s visibility.
- Accessibility: HTML and CSS menus work seamlessly on most devices and assistive technologies.
- Responsiveness: CSS media queries allow you to create a fully responsive menu for mobile devices.
Now, let’s get into how to create a Responsive Mega Menu and Dropdown Menu using only HTML & CSS step by step.
Step-by-Step Guide to Building a Responsive Mega and Dropdown Menu with Just HTML & CSS
Creating a Responsive Mega and Dropdown Menu is straightforward if you break it down into steps. Here’s the complete process:
Step 1: Building the HTML Structure
To begin, we will establish the foundational structure of the mega and dropdown menu with HTML. This will include a navbar containing links, dropdown items, and mega menu sections. Below is a sample code snippet to help you get started:
<!DOCTYPE html>
<!-- Created By abhikesh - www.abhikesh.com -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Mega Menu | abhikesh</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<nav>
<div class="wrapper">
<div class="logo"><a href="#">Abhikesh</a></div>
<input type="radio" name="slider" id="menu-btn">
<input type="radio" name="slider" id="close-btn">
<ul class="nav-links">
<label for="close-btn" class="btn close-btn"><i class="fas fa-times"></i></label>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li>
<a href="#" class="desktop-item">Dropdown Menu</a>
<input type="checkbox" id="showDrop">
<label for="showDrop" class="mobile-item">Dropdown Menu</label>
<ul class="drop-menu">
<li><a href="#">Drop menu 1</a></li>
<li><a href="#">Drop menu 2</a></li>
<li><a href="#">Drop menu 3</a></li>
<li><a href="#">Drop menu 4</a></li>
</ul>
</li>
<li>
<a href="#" class="desktop-item">Mega Menu</a>
<input type="checkbox" id="showMega">
<label for="showMega" class="mobile-item">Mega Menu</label>
<div class="mega-box">
<div class="content">
<div class="row">
<img src="img.jpg" alt="">
</div>
<div class="row">
<header>Design Services</header>
<ul class="mega-links">
<li><a href="#">Graphics</a></li>
<li><a href="#">Vectors</a></li>
<li><a href="#">Business cards</a></li>
<li><a href="#">Custom logo</a></li>
</ul>
</div>
<div class="row">
<header>Email Services</header>
<ul class="mega-links">
<li><a href="#">Personal Email</a></li>
<li><a href="#">Business Email</a></li>
<li><a href="#">Mobile Email</a></li>
<li><a href="#">Web Marketing</a></li>
</ul>
</div>
<div class="row">
<header>Security services</header>
<ul class="mega-links">
<li><a href="#">Site Seal</a></li>
<li><a href="#">VPS Hosting</a></li>
<li><a href="#">Privacy Seal</a></li>
<li><a href="#">Website design</a></li>
</ul>
</div>
</div>
</div>
</li>
<li><a href="#">Feedback</a></li>
</ul>
<label for="menu-btn" class="btn menu-btn"><i class="fas fa-bars"></i></label>
</div>
</nav>
<div class="body-text">
<div class="title">Responsive Dropdown and Mega Menu</div>
<div class="sub-title">using only HTML & CSS</div>
</div>
</body>
</html>
Step 2: Styling the Mega Menu with CSS
Next, we’ll style the navigation bar, dropdown menu, and mega menu using CSS. The menu will have a modern look with a clean design, suitable for any professional website. Below is an example of CSS styling:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
nav {
position: fixed;
z-index: 99;
width: 100%;
background: #242526;
}
nav .wrapper {
position: relative;
max-width: 1300px;
padding: 0px 30px;
height: 70px;
line-height: 70px;
margin: auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.wrapper .logo a {
color: #f2f2f2;
font-size: 30px;
font-weight: 600;
text-decoration: none;
}
.wrapper .nav-links {
display: inline-flex;
}
.nav-links li {
list-style: none;
}
.nav-links li a {
color: #f2f2f2;
text-decoration: none;
font-size: 18px;
font-weight: 500;
padding: 9px 15px;
border-radius: 5px;
transition: all 0.3s ease;
}
.nav-links li a:hover {
background: #3A3B3C;
}
.nav-links .mobile-item {
display: none;
}
.nav-links .drop-menu {
position: absolute;
background: #242526;
width: 180px;
line-height: 45px;
top: 85px;
opacity: 0;
visibility: hidden;
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}
.nav-links li:hover .drop-menu,
.nav-links li:hover .mega-box {
transition: all 0.3s ease;
top: 70px;
opacity: 1;
visibility: visible;
}
.drop-menu li a {
width: 100%;
display: block;
padding: 0 0 0 15px;
font-weight: 400;
border-radius: 0px;
}
.mega-box {
position: absolute;
left: 0;
width: 100%;
padding: 0 30px;
top: 85px;
opacity: 0;
visibility: hidden;
}
.mega-box .content {
background: #242526;
padding: 25px 20px;
display: flex;
width: 100%;
justify-content: space-between;
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}
.mega-box .content .row {
width: calc(25% - 30px);
line-height: 45px;
}
.content .row img {
width: 100%;
height: 100%;
object-fit: cover;
}
.content .row header {
color: #f2f2f2;
font-size: 20px;
font-weight: 500;
}
.content .row .mega-links {
margin-left: -40px;
border-left: 1px solid rgba(255, 255, 255, 0.09);
}
.row .mega-links li {
padding: 0 20px;
}
.row .mega-links li a {
padding: 0px;
padding: 0 20px;
color: #d9d9d9;
font-size: 17px;
display: block;
}
.row .mega-links li a:hover {
color: #f2f2f2;
}
.wrapper .btn {
color: #fff;
font-size: 20px;
cursor: pointer;
display: none;
}
.wrapper .btn.close-btn {
position: absolute;
right: 30px;
top: 10px;
}
nav input {
display: none;
}
.body-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
text-align: center;
padding: 0 30px;
}
.body-text div {
font-size: 45px;
font-weight: 600;
}
Step 3: Adding Responsiveness
To make our Responsive Mega and Dropdown Menu adapt to different screen sizes, we’ll use CSS media queries. This ensures the menu looks good on both desktop and mobile devices. Here’s how to do it:
@media screen and (max-width: 970px) {
.wrapper .btn {
display: block;
}
.wrapper .nav-links {
position: fixed;
height: 100vh;
width: 100%;
max-width: 350px;
top: 0;
left: -100%;
background: #242526;
display: block;
padding: 50px 10px;
line-height: 50px;
overflow-y: auto;
box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.18);
transition: all 0.3s ease;
}
/* custom scroll bar */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #242526;
}
::-webkit-scrollbar-thumb {
background: #3A3B3C;
}
#menu-btn:checked~.nav-links {
left: 0%;
}
#menu-btn:checked~.btn.menu-btn {
display: none;
}
#close-btn:checked~.btn.menu-btn {
display: block;
}
.nav-links li {
margin: 15px 10px;
}
.nav-links li a {
padding: 0 20px;
display: block;
font-size: 20px;
}
.nav-links .drop-menu {
position: static;
opacity: 1;
top: 65px;
visibility: visible;
padding-left: 20px;
width: 100%;
max-height: 0px;
overflow: hidden;
box-shadow: none;
transition: all 0.3s ease;
}
#showDrop:checked~.drop-menu,
#showMega:checked~.mega-box {
max-height: 100%;
}
.nav-links .desktop-item {
display: none;
}
.nav-links .mobile-item {
display: block;
color: #f2f2f2;
font-size: 20px;
font-weight: 500;
padding-left: 20px;
cursor: pointer;
border-radius: 5px;
transition: all 0.3s ease;
}
.nav-links .mobile-item:hover {
background: #3A3B3C;
}
.drop-menu li {
margin: 0;
}
.drop-menu li a {
border-radius: 5px;
font-size: 18px;
}
.mega-box {
position: static;
top: 65px;
opacity: 1;
visibility: visible;
padding: 0 20px;
max-height: 0px;
overflow: hidden;
transition: all 0.3s ease;
}
.mega-box .content {
box-shadow: none;
flex-direction: column;
padding: 20px 20px 0 20px;
}
.mega-box .content .row {
width: 100%;
margin-bottom: 15px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.mega-box .content .row:nth-child(1),
.mega-box .content .row:nth-child(2) {
border-top: 0px;
}
.content .row .mega-links {
border-left: 0px;
padding-left: 15px;
}
.row .mega-links li {
margin: 0;
}
.content .row header {
font-size: 19px;
}
}
With these media queries, the navigation menu will stack vertically on smaller screens, and the mega menu will adjust to fit the width of the screen.
Want to Check Username Availability on Social Media?If you’re looking to check username availability on various social media platforms, visit
NameChkr to find out!
Read Also
- Glassmorphism Login Form in HTML and CSS
Explore the stylish world of glassmorphism as you create a modern login form using HTML and CSS. This guide breaks down the design process step by step.
- Toggle Button using HTML, CSS, and JavaScript
Discover how to enhance user interaction by creating a sleek toggle button with HTML, CSS, and JavaScript. This tutorial covers everything from structure to styling.
- Responsive Cards in HTML and CSS
Learn how to design eye-catching responsive cards that adapt seamlessly to any device. This guide offers practical tips for achieving stunning layouts.
- Build a Google Gemini Chatbot Using HTML, CSS, and JS
Dive into chatbot development by creating a Google Gemini chatbot with HTML, CSS, and JavaScript. This tutorial will help you understand the basics of interactive forms.
Conclusion
Building a Responsive Mega and Dropdown Menu using only HTML and CSS is a great way to enhance your website’s navigation without relying on JavaScript. This approach provides a lightweight, fast-loading solution that is both accessible and SEO-friendly. You now have a responsive, clean, and professional menu that adapts seamlessly across different screen sizes.
If you run into any issues while coding or need further guidance, feel free to download the source code below.
Download Source Code
To get the full source code for this Responsive Mega and Dropdown Menu using only HTML & CSS, click the button below:
Hey there! Welcome to our blog! Today, we’re diving into an exciting project that’s not only fun but also visually stunning: creating a sleek Glassmorphism Calculator using just HTML and CSS. If you’re looking to spruce up your web design skills, you’re in the right place!
Understanding Glassmorphism Calculator
Before we jump into the fun stuff, let’s chat a bit about glassmorphism calculator. This design trend is all about that frosted glass effect that feels so modern and fresh. Imagine creating an interface that not only works well but also looks great—it’s like the icing on the cake for your web projects!
Setting Up the Project
So, let’s get started! First things first, we’ll need to set up our project. Don’t worry; it’s super easy!
- Create a new folder for your project.
- Inside that folder, make two files: index.html and style.css.
Features of Our Glassmorphism Calculator
Now, let’s talk about what our Glassmorphism Calculator will do. Here are some cool features we’ll implement:
- A visually appealing interface that draws users in with its glassy effect.
- Basic arithmetic operations: addition, subtraction, multiplication, and division—everything you need for those everyday calculations.
- Responsive design that looks fabulous on any device, so your calculator is ready to go wherever you are.
Building the HTML Structure
Let’s begin by crafting the HTML structure for our calculator. Below is the code that forms the basic layout:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<!-- Website - www.abhikesh.com -->
<head>
<meta charset="UTF-8" />
<title>Glassmorphism Calculator HTML CSS JavaScript | CodingNepal</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="bubbles">
<span class="one"></span>
<span class="two"></span>
<span class="three"></span>
<span class="four"></span>
<span class="five"></span>
<span class="six"></span>
<span class="seven"></span>
<span class="seven"></span>
</div>
<div class="bubbles">
<span class="one"></span>
<span class="two"></span>
<span class="three"></span>
<span class="four"></span>
<span class="five"></span>
<span class="six"></span>
<span class="seven"></span>
<span class="seven"></span>
</div>
<div class="bubbles">
<span class="one"></span>
<span class="two"></span>
<span class="three"></span>
<span class="four"></span>
<span class="five"></span>
<span class="six"></span>
<span class="seven"></span>
<span class="seven"></span>
</div>
<div class="bubbles">
<span class="one"></span>
<span class="two"></span>
<span class="three"></span>
<span class="four"></span>
<span class="five"></span>
<span class="six"></span>
<span class="seven"></span>
<span class="seven"></span>
</div>
<div class="container">
<form action="#" name="forms">
<input type="text" name="answer" />
<div class="buttons">
<input type="button" value="AC" onclick="forms.answer.value = ''" />
<input type="button" value="DEL" onclick="forms.answer.value = forms.answer.value.substr(0 , forms.answer.value.length -1)" />
<input type="button" value="%" onclick="forms.answer.value += '%'" />
<input type="button" value="/" onclick="forms.answer.value += '/'" />
</div>
<div class="buttons">
<input type="button" value="7" onclick="forms.answer.value += '7'" />
<input type="button" value="8" onclick="forms.answer.value += '8'" />
<input type="button" value="9" onclick="forms.answer.value += '9'" />
<input type="button" value="*" onclick="forms.answer.value += '*'" />
</div>
<div class="buttons">
<input type="button" value="4" onclick="forms.answer.value += '4'" />
<input type="button" value="5" onclick="forms.answer.value += '5'" />
<input type="button" value="6" onclick="forms.answer.value += '6'" />
<input type="button" value="-" onclick="forms.answer.value += '-'" />
</div>
<div class="buttons">
<input type="button" value="1" onclick="forms.answer.value += '1'" />
<input type="button" value="2" onclick="forms.answer.value += '2'" />
<input type="button" value="3" onclick="forms.answer.value += '3'" />
<input type="button" value="+" onclick="forms.answer.value += '+'" />
</div>
<div class="buttons">
<input type="button" value="0" onclick="forms.answer.value += '0'" />
<input type="button" value="00" onclick="forms.answer.value += '00'" />
<input type="button" value="." onclick="forms.answer.value += '.'" />
<input type="button" value="=" onclick="forms.answer.value = eval(forms.answer.value)" />
</div>
</form>
</div>
</body>
</html>
Explanation of the HTML Code
- The <div class=”bubbles”> contains several <span> elements that create animated bubbles, giving a dynamic feel to the background.
- The <div class=”container”> holds the calculator layout, including an input field for the calculations and various buttons for user interaction.
Styling with CSS
Now, let’s style our calculator to give it that beautiful glass morphism effect. Here’s how the CSS looks:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins',sans-serif;
}
body{
height: 100vh;
width: 100%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(#2196f3 , #e91e63);
}
.bubbles{
position: absolute;
bottom: -120px;
display: flex;
flex-wrap: wrap;
margin-top: 70px;
width: 100%;
justify-content: space-around;
}
.bubbles span{
height: 60px;
width: 60px;
background: rgba(255, 255, 255, 0.1);
animation: move 10s linear infinite;
position: relative;
overflow: hidden;
}
@keyframes move {
100%{
transform: translateY(-100vh);
}
}
.bubbles span.one{
animation-delay: 2.2s;
transform: scale(2.15)
}
.bubbles span.two{
animation-delay: 3.5s;
transform: scale(1.55);
}
.bubbles span.three{
animation-delay: 0.2s;
transform: scale(0.35);
}
.bubbles span.four{
animation-delay: 6s;
transform: scale(2.15);
}
.bubbles span.five{
animation-delay: 7s;
transform: scale(0.5);
}
.bubbles span.six{
animation-delay: 4s;
transform: scale(2.5);
}
.bubbles span.seven{
animation-delay: 3;
transform: scale(1.5);
}
.bubbles span:before{
content: '';
position: absolute;
left: 0;
top: 0;
height: 60px;
width: 40%;
transform: skew(45deg) translateX(150px);
background: rgba(255, 255, 255, 0.15);
animation: mirror 3s linear infinite;
}
@keyframes mirror {
100%{
transform: translateX(-450px);
}
}
.bubbles span.one:before{
animation-delay: 1.5s;
}
.bubbles span.two:before{
animation-delay: 3.5s;
}
.bubbles span.three:before{
animation-delay: 2.5s;
}
.bubbles span.four:before{
animation-delay: 7.5s;
}
.bubbles span.five:before{
animation-delay: 4.5s;
}
.bubbles span.six:before{
animation-delay: 0.5s;
}
.bubbles span.seven:before{
animation-delay: 6s;
}
.container{
z-index: 12;
width: 420px;
padding: 15px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.1);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
border-top: 1px solid rgba(255, 255, 255, 0.5);
border-left: 1px solid rgba(255, 255, 255, 0.5);
}
.container input[type="text"]{
width: 100%;
height: 100px;
margin: 0 3px;
outline: none;
border: none;
color: #fff;
font-size: 30px;
text-align: right;
padding-right: 10px;
background: transparent;
}
.container input[type="button"]{
height: 75px;
color: #fff;
width: calc(100% / 4 - 5px);
background: transparent;
border-radius: 12px;
margin-top: 15px;
outline: none;
border: none;
font-size: 25px;
cursor: pointer;
transition: all 0.3s ease;
}
.container input[type="button"]:hover{
background: rgba(255, 255, 255, 0.1);
}
Explanation of the CSS Code
The CSS file starts with an import statement to include the Poppins font from Google Fonts.
- The body element is styled with a vibrant gradient background, ensuring a visually appealing backdrop for the calculator.
- The .container class applies the glass morphism effect with a transparent background and rounded edges, along with subtle shadows for depth.
Want to Check Username Availability on Social Media?If you’re looking to check username availability on various social media platforms, visit
NameChkr to find out!
Read Also
- Glassmorphism Login Form in HTML and CSS
Explore the stylish world of glassmorphism as you create a modern login form using HTML and CSS. This guide breaks down the design process step by step.
- Toggle Button using HTML, CSS, and JavaScript
Discover how to enhance user interaction by creating a sleek toggle button with HTML, CSS, and JavaScript. This tutorial covers everything from structure to styling.
- Responsive Cards in HTML and CSS
Learn how to design eye-catching responsive cards that adapt seamlessly to any device. This guide offers practical tips for achieving stunning layouts.
- Build a Google Gemini Chatbot Using HTML, CSS, and JS
Dive into chatbot development by creating a Google Gemini chatbot with HTML, CSS, and JavaScript. This tutorial will help you understand the basics of interactive forms.
Conclusion
Congratulations! You’ve just created a beautiful Glassmorphism Calculator using only HTML and CSS. This project showcases not only your coding skills but also your ability to implement modern design trends effectively.
Feel free to experiment with the code, tweak the styles, and make it your own. The beauty of web development lies in the endless possibilities for customization!
Download Source Code
If you want to get your hands on the full source code for this glass morphism calculator, simply click the button below:
Z-Index Transitions: Enhance Your Images with CSS
In this tutorial, we’ll guide you through creating Z-Index transitions, an interactive effect on images using only CSS. This approach is perfect for web developers looking to enhance user engagement by adding dynamic visual effects to images. By utilizing CSS alone, you can create seamless transitions that add depth to your design and improve the user experience without the need for JavaScript.
Whether you’re a beginner or an experienced developer, you’ll find value in learning how to implement Z-Index transitions on your website. Not only do these effects provide a professional look, but they also keep your site lightweight and fast. In this step-by-step guide, you’ll discover just how easy it is to create this eye-catching effect using only HTML and CSS.
What is a Z-Index Transition?
Z-Index transitions are a CSS effect that allows specific elements, such as images or cards, to layer over one another in a smooth and visually appealing manner. This technique is widely used in image galleries, product cards, and various designs where visual hierarchy plays a key role in user interaction.
Why Master Z-Index Transitions?
Mastering Z-Index transitions offers several advantages:
- Enhances User Interaction: This technique adds a dynamic and engaging visual effect to your website.
- Lightweight Design: Since no JavaScript is needed, you can ensure faster load times.
- Improves SEO: A faster, cleaner website contributes to better rankings on search engines.
- Responsive and Accessible: When implemented correctly, these transitions work beautifully across all devices.
How to Create Z-Index Transitions on Images with CSS
Here’s a step-by-step guide to building this visually appealing feature using only HTML and CSS.
Set Up Your Basic HTML Structure
Start by creating the structure of your HTML, where each image or card will have its section. Below is an example of how to set up the basic HTML for this:
<!DOCTYPE html>
<!-- Website - www.abhikesh.com -->
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>Image Hover Animation HTML CSS | abhikesh</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="icon-image">
<div class="icon">
<img src="images/img1.jpg" alt="" />
</div>
<div class="hover-image one">
<div class="img">
<img src="images/img1.jpg" alt="" />
</div>
<div class="content">
<div class="details">
<div class="name">Rahul</div>
<div class="job">Designer || Developer</div>
</div>
</div>
</div>
</div>
<div class="icon-image">
<div class="icon">
<img src="images/img2.jpg" alt="" />
</div>
<div class="hover-image one">
<div class="img">
<img src="images/img2.jpg" alt="" />
</div>
<div class="content">
<div class="details">
<div class="name">Rohit</div>
<div class="job">Blogger || Designer</div>
</div>
</div>
</div>
</div>
<div class="icon-image">
<div class="icon">
<img src="images/img3.jpg" alt="" />
</div>
<div class="hover-image one">
<div class="img">
<img src="images/img3.jpg" alt="" />
</div>
<div class="content">
<div class="details">
<div class="name">Arzu</div>
<div class="job">Designer || Developer</div>
</div>
</div>
</div>
</div>
<div class="icon-image">
<div class="icon">
<img src="images/img4.jpg" alt="" />
</div>
<div class="hover-image one">
<div class="img">
<img src="images/img4.jpg" alt="" />
</div>
<div class="content">
<div class="details">
<div class="name">Shivani</div>
<div class="job">Photographer || Youtuber</div>
</div>
</div>
</div>
</div>
<div class="icon-image">
<div class="icon">
<img src="images/img5.jpg" alt="" />
</div>
<div class="hover-image one">
<div class="img">
<img src="images/img5.jpg" alt="" />
</div>
<div class="content">
<div class="details">
<div class="name">Aryn</div>
<div class="job">Developer || Designer</div>
</div>
</div>
</div>
</div>
<div class="icon-image last">
<div class="icon">
<img src="images/img6.jpg" alt="" />
</div>
<div class="hover-image one">
<div class="img">
<img src="images/img6.jpg" alt="" />
</div>
<div class="content">
<div class="details">
<div class="name">Anil</div>
<div class="job">Blogger || Youtuber</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
- Product Image: The image element that will display the product image.
- Card Info: This section will include product details such as the name, price, and an “Add to Cart” button.
Style with CSS for the Transition
Next, add CSS to style the product card and create smooth transitions when users hover over it. We will use the z-index property along with other CSS properties like transform and transition to create this effect.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins',sans-serif;
}
body{
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background: #0396FF;
}
.container{
height: 500px;
display: flex;
min-width: 400px;
align-items: flex-end;
justify-content: center;
margin-top: -55px;
}
.icon-image{
position: relative;
height: 70px;
width: 70px;
margin: 0 5px;
cursor: pointer;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
border-radius: 50%;
background: #fff;
}
.icon-image .icon img{
position: absolute;
height: 95%;
width: 95%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
object-fit: cover;
border-radius: 50%;
border: 3px solid #0396FF;
}
.icon-image::before{
content: '';
position: absolute;
width: 50px;
height: 50px;
left: 50%;
top: -50px;
transform: translateX(-50%);
}
.icon-image .hover-image{
position: absolute;
height: 350px;
width: 300px;
bottom: 100px;
left: 50%;
z-index: 0;
transform: translateX(-50%);
border-radius: 25px;
pointer-events: none;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
transition: transform 0.5s ease, z-index 0s, left 0.5s ease ;
transition-delay: 0s, 0.5s, 0.5s;
}
.icon-image:hover .hover-image{
left: -200px;
z-index: 12;
transform: translateX(80px);
transition: left 0.5s ease, z-index 0s, transform 0.5s ease;
transition-delay: 0s, 0.5s, 0.5s;
}
.hover-image img{
position: absolute;
height: 100%;
width: 100%;
object-fit: cover;
border: 3px solid #fff;
border-radius: 25px;
}
.hover-image .content{
position: absolute;
width: 100%;
bottom: -10px;
padding: 0 10px;
}
.content::before{
content: '';
position: absolute;
height: 20px;
width: 20px;
background: #fff;
left: 50%;
bottom: -7px;
transform: rotate(45deg) translateX(-50%);
z-index: -1;
}
.content .details{
position: relative;
background: #fff;
padding: 10px;
border-radius: 12px;
text-align: center;
opacity: 0;
pointer-events: none;
transform: translateY(10px);
}
.icon-image:hover .details{
transition: all 0.5s ease;
transition-delay: 0.9s;
opacity: 1;
transform: translateY(4px);
pointer-events: auto;
}
.details::before{
content: '';
position: absolute;
height: 20px;
width: 20px;
background: #fff;
left: 50%;
bottom: -15px;
transform: rotate(45deg) translateX(-50%);
z-index: -1;
}
.content .details .name{
font-size: 20px;
font-weight: 500;
}
.content .details .job{
font-size: 17px;
color: #0396FF;
margin: -3px 0 5px 0;
}
.content .details a:hover{
color: #0396FF;
}
.container .last .hover-image{
transition: none;
}
.container .last:hover .hover-image{
transition: 0;
}
.last:hover .details{
transition-delay: 0s;
}
This approach ensures the card adapts to mobile screens, maintaining a responsive and user-friendly design.
Best Practices for SEO and Performance
When building animated and interactive designs, it’s essential to consider SEO and performance optimization. Here are a few tips:
Semantic HTML: Use proper HTML tags like <h2>, <p>, and <button> to structure your content for search engines.
- Optimize Images: Compress images to reduce load times while maintaining high quality.
- Alt Text for Images: Use descriptive alt text to improve accessibility and SEO.
- Responsive Design: Ensure your designs are mobile-friendly by testing them across different screen sizes.
- Fast Load Times: Keep your CSS clean and lightweight to ensure faster loading times, which improves both user experience and SEO ranking.
Want to Check Username Availability on Social Media?If you’re looking to check username availability on various social media platforms, visit
NameChkr to find out!
Read Also
- Glassmorphism Login Form in HTML and CSS
Explore the stylish world of glassmorphism as you create a modern login form using HTML and CSS. This guide breaks down the design process step by step.
- Toggle Button using HTML, CSS, and JavaScript
Discover how to enhance user interaction by creating a sleek toggle button with HTML, CSS, and JavaScript. This tutorial covers everything from structure to styling.
- Responsive Cards in HTML and CSS
Learn how to design eye-catching responsive cards that adapt seamlessly to any device. This guide offers practical tips for achieving stunning layouts.
- Build a Google Gemini Chatbot Using HTML, CSS, and JS
Dive into chatbot development by creating a Google Gemini chatbot with HTML, CSS, and JavaScript. This tutorial will help you understand the basics of interactive forms.
Conclusion
By following this guide, you’ve learned how to create stunning Z-Index transitions on images using only HTML and CSS. This powerful technique not only enhances your website’s visual appeal but also improves performance and SEO, all while maintaining a lightweight structure.
Ready to start building? You can download the complete source code below and try it out on your project.
Create a Beautiful Product Card with Smooth Animations
Today we are back again with another tutorial showing the process of creating an animated product card using just HTML and CSS. This is perfect for anyone looking to add interactive product cards to their website, providing users with a modern and engaging experience without needing JavaScript.
This tutorial is useful for both an experienced developer or even if you’re not a pro in web development. So, let’s create our animated product card that works across devices.
What is a Product Card?
A product card is a small visual element on a webpage that showcases essential product details. Typically, a product card includes:
- High-Resolution Product Image
- Product Name and Logo
- Product Price
- The “Add to Cart” Button
- Color and Size Options
Adding an animated product card to your site can boost user interaction, helping visitors visualize product attributes like color, size, or variations. With CSS animations, you can create sleek transitions and effects that enhance the user experience.
Why Use Only HTML & CSS for Product Card Animation?
Using just HTML and CSS for your product card animations offers several advantages:
- No JavaScript Required: This keeps the website lightweight and ensures faster page load times.
- Responsive Design: CSS media queries allow you to make your product card design mobile-friendly and adaptable to any screen size.
- SEO-Friendly: By sticking to HTML and CSS, you optimize page performance, improving your site’s SEO ranking.
How to Create an Animated Product Card Using HTML & CSS
Follow the steps below to create a product card with smooth animations. We’ll focus on a simple and clean design while applying some beautiful CSS transitions to make the card visually appealing.
1. Set Up Your HTML Structure
The first step is to create the structure for the product card using semantic HTML. You’ll create an HTML file where you define the layout for your product card.
Here’s an example:
<!DOCTYPE html>
<!-- Designed by abhikesh | www.abhikesh.com/ -->
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title> Responsive Animated Product Card | abhikesh </title>
<link rel="stylesheet" href="style.css">
<!-- Boxicons CDN Link -->
<link href='https://unpkg.com/
[email protected]/css/boxicons.min.css' rel='stylesheet'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="product-card">
<div class="logo-cart">
<img src="images/logo.jpg" alt="logo">
<i class='bx bx-shopping-bag'></i>
</div>
<div class="main-images">
<img id="blue" class="blue active" src="images/blue.png" alt="blue">
<img id="pink" class="pink" src="images/pink.png" alt="blue">
<img id="yellow" class="yellow" src="images/yellow.png" alt="blue">
</div>
<div class="shoe-details">
<span class="shoe_name">ADDIDAS GAZE ZX</span>
<p>Lorem ipsum dolor sit lorenm i amet, consectetur adipisicing elit. Eum, ea, ducimus!</p>
<div class="stars">
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bx-star'></i>
</div>
</div>
<div class="color-price">
<div class="color-option">
<span class="color">Colour:</span>
<div class="circles">
<span class="circle blue active" id="blue"></span>
<span class="circle pink " id="pink"></span>
<span class="circle yellow " id="yellow"></span>
</div>
</div>
<div class="price">
<span class="price_num">$10.00</span>
<span class="price_letter">Ten dollar only</span>
</div>
</div>
<div class="button">
<div class="button-layer"></div>
<button>Add To Cart</button>
</div>
</div>
<script>
let circle = document.querySelector(".color-option");
circle.addEventListener("click", (e) => {
let target = e.target;
if (target.classList.contains("circle")) {
circle.querySelector(".active").classList.remove("active");
target.classList.add("active");
document.querySelector(".main-images .active").classList.remove("active");
document.querySelector(`.main-images .${target.id}`).classList.add("active");
}
});
</script>
</body>
</html>
In this example:
- The product card container holds the product image and the product details.
- Product image contains the image element for your product.
- Product info includes the product name, price, and an “Add to Cart” button.
2. Style the Product Card with CSS
Now, we’ll use CSS to style the product card and add animations. You’ll need to create a separate CSS file or include the CSS within a <style> tag.
Here’s the basic CSS for styling and animations:
/* Google Fonts Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-image: linear-gradient(135deg, #43CBFF 10%, #9708CC 100%);
}
.product-card {
position: relative;
max-width: 355px;
width: 100%;
border-radius: 25px;
padding: 20px 30px 30px 30px;
background: #fff;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
z-index: 3;
overflow: hidden;
}
.product-card .logo-cart{
display: flex;
align-items: center;
justify-content: space-between;
}
.product-card .logo-cart img{
height: 60px;
width: 60px;
object-fit: cover;
}
.product-card .logo-cart i{
font-size: 27px;
color: #707070;
cursor: pointer;
transition: color 0.3s ease;
}
.product-card .logo-cart i:hover{
color: #333;
}
.product-card .main-images{
position: relative;
height: 210px;
}
.product-card .main-images img{
position: absolute;
height: 300px;
width: 300px;
object-fit: cover;
transform: rotate(18deg);
left: 12px;
top: -40px;
z-index: -1;
opacity: 0;
transition: opacity 0.5s ease;
}
.product-card .main-images img.active{
opacity: 1;
}
.product-card .shoe-details .shoe_name{
font-size: 24px;
font-weight: 500;
color: #161616;
}
.product-card .shoe-details p{
font-size: 12px;
font-weight: 400;
color: #333;
text-align: justify;
}
.product-card .shoe-details .stars i{
margin: 0 -1px;
color: #333;
}
.product-card .color-price .color-option{
display: flex;
align-items: center;
}
.color-price{
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
}
.color-price .color-option .color{
font-size: 18px;
font-weight: 500;
color: #333;
margin-right: 8px;
}
.color-option .circles{
display: flex;
}
.color-option .circles .circle{
height: 18px;
width: 18px;
background: #0071C7;
border-radius: 50%;
margin: 0 4px;
cursor: pointer;
transition: all 0.4s ease;
}
.color-option .circles .circle.blue.active{
box-shadow: 0 0 0 2px #fff,
0 0 0 4px #0071C7;
}
.color-option .circles .circle.pink{
background: #FA1795;
}
.color-option .circles .circle.pink.active{
box-shadow: 0 0 0 2px #fff,
0 0 0 4px #FA1795;
}
.color-option .circles .circle.yellow{
background: #F5DA00;
}
.color-option .circles .circle.yellow.active{
box-shadow: 0 0 0 2px #fff,
0 0 0 4px #F5DA00;
}
.color-price .price{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.color-price .price .price_num{
font-size: 25px;
font-weight: 600;
color: #707070;
}
.color-price .price .price_letter{
font-size: 10px;
font-weight: 600;
margin-top: -4px;
color: #707070;
}
.product-card .button{
position: relative;
height: 50px;
width: 100%;
border-radius: 25px;
margin-top: 30px;
overflow: hidden;
}
.product-card .button .button-layer{
position: absolute;
height: 100%;
width: 300%;
left: -100%;
background-image: linear-gradient(135deg,#9708CC, #43CBFF,#9708CC, #43CBFF );
transition: all 0.4s ease;
border-radius: 25PX;
}
.product-card .button:hover .button-layer{
left: 0;
}
.product-card .button button{
position: relative;
height: 100%;
width: 100%;
background: none;
outline: none;
border: none;
font-size: 18px;
font-weight: 600;
letter-spacing: 1px;
color: #fff;
}
In this CSS code:
- The product card defines the overall card styling, including a border and a hover effect that scales the card when hovered.
- Product image ensures the image is responsive, filling the card’s width.
- Price styles the price in a standout color.
- The button adds a hover effect to the “Add to Cart” button.
3. Make Your Product Card Responsive
To ensure the product card works well across different devices, you’ll want to include media queries. Here’s a simple way to adjust the product card for smaller screens:
@media screen and (max-width: 600px) {
.product-card .button button{
color: pink;
}
}
This media query adjusts the card width on screens smaller than 600px, ensuring it remains user-friendly on mobile devices.
Best Practices for SEO and Performance
When building a website, especially one that features animations and interactivity, it’s crucial to optimize for SEO and page performance. Here are a few crucial tips to remember:
- Use Semantic HTML: Properly structure your HTML using appropriate tags like <h2>, <p>, and <button>. This helps search engines understand your content.
- Optimize Images: Use high-quality images, but make sure they’re compressed to improve page loading speed.
- Alt Text for Images: Ensure each image includes descriptive alt text to improve accessibility and SEO.
- Responsive Design: Make sure your product cards look great on all devices by using media queries.
- Fast Load Times: Clean and simple CSS ensures faster loading times, which is beneficial for SEO.
Want to Check Username Availability on Social Media?If you’re looking to check username availability on various social media platforms, visit
NameChkr to find out!
Read Also
- Glassmorphism Login Form in HTML and CSS
Explore the stylish world of glassmorphism as you create a modern login form using HTML and CSS. This guide breaks down the design process step by step.
- Toggle Button using HTML, CSS, and JavaScript
Discover how to enhance user interaction by creating a sleek toggle button with HTML, CSS, and JavaScript. This tutorial covers everything from structure to styling.
- Responsive Cards in HTML and CSS
Learn how to design eye-catching responsive cards that adapt seamlessly to any device. This guide offers practical tips for achieving stunning layouts.
- Build a Google Gemini Chatbot Using HTML, CSS, and JS
Dive into chatbot development by creating a Google Gemini chatbot with HTML, CSS, and JavaScript. This tutorial will help you understand the basics of interactive forms.
Conclusion
By following this guide, you’ve learned how to create a fully responsive, animated product card using only HTML and CSS. The simple but elegant design showcases how CSS transitions can bring life to a product display, without the need for JavaScript.
If you’re ready to start building your animated product card, you can download the source code below.
Comments
How to Create Responsive Cards in HTML and CSS
How to Implement Show & Hide Password Feature in HTML, CSS & JavaScript (2024)
Responsive Login & Registration Form in HTML & CSS | Free Code
How to Create Responsive Cards in HTML and CSS
Ultimate Overview of Creating a Stunning Login and Registration Form