Hello Friend, Today I Create Responsive Service Card Design With Hover Animation Using HTML CSS.
So, what exactly is a responsive services card design with hover animation? Simply put, it is a design element that showcases your services or offerings in a visually appealing and interactive manner. These cards are responsive, meaning they adjust to different screen sizes, making them suitable for desktop, tablet, and mobile devices. The hover animation feature adds an extra layer of interactivity, where the card reacts when the user hovers their mouse over it.
Create index.html file and copy code and paste code our layout.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<title>Service Card Design With Hover Animation Using HTML & CSS | Mycodingtutorial</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="main-service-section-xml">
<div class="container">
<div class="row">
<div class="header-section">
<h2 class="title">Our Latest <span>Services</span></h2>
</div>
</div>
<div class="row">
<div class="main-service-column-xml">
<div class="main-single-service-xml">
<div class="content">
<span class="icon">
<i class="fa-solid fa-laptop"></i>
</span>
<h3 class="main-title">Web Development</h3>
<p class="des">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maxime, laboriosam?
</p>
<a href="#" class="learn-more">Read More</a>
</div>
<span class="circle-hover-animation"></span>
</div>
</div>
<div class="main-service-column-xml">
<div class="main-single-service-xml">
<div class="content">
<span class="icon">
<i class="fa-solid fa-shop"></i>
</span>
<h3 class="main-title">Marketing</h3>
<p class="des">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maxime, laboriosam?
</p>
<a href="#" class="learn-more">Read More</a>
</div>
<span class="circle-hover-animation"></span>
</div>
</div>
<div class="main-service-column-xml">
<div class="main-single-service-xml">
<div class="content">
<span class="icon">
<i class="fa-brands fa-android"></i>
</span>
<h3 class="main-title">App Development</h3>
<p class="des">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maxime, laboriosam?
</p>
<a href="#" class="learn-more">Read More</a>
</div>
<span class="circle-hover-animation"></span>
</div>
</div>
<div class="main-service-column-xml">
<div class="main-single-service-xml">
<div class="content">
<span class="icon">
<i class="fa-solid fa-database"></i>
</span>
<h3 class="main-title">Data Analysis</h3>
<p class="des">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maxime, laboriosam?
</p>
<a href="#" class="learn-more">Read More</a>
</div>
<span class="circle-hover-animation"></span>
</div>
</div>
<div class="main-service-column-xml">
<div class="main-single-service-xml">
<div class="content">
<span class="icon">
<i class="fa-solid fa-palette"></i>
</span>
<h3 class="main-title">Graphic Design</h3>
<p class="des">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maxime, laboriosam?
</p>
<a href="#" class="learn-more">Read More</a>
</div>
<span class="circle-hover-animation"></span>
</div>
</div>
<div class="main-service-column-xml">
<div class="main-single-service-xml">
<div class="content">
<span class="icon">
<i class="fa-brands fa-wordpress"></i>
</span>
<h3 class="main-title">Wordpress</h3>
<p class="des">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maxime, laboriosam?
</p>
<a href="#" class="learn-more">Read More</a>
</div>
<span class="circle-hover-animation"></span>
</div>
</div>
</div>
</div>
</section>
</body>
</html>Create style.css file and copy code and paste code our layout.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
width: 100%;
background-color: #211f24;
color: #fff;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.main-service-section-xml{
padding: 50px 0;
color: #202020;
background-color: #b1b1b1;
}
.main-service-section-xml .container{
max-width: 1240px;
margin: auto;
}
.row{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.main-service-section-xml .title{
color: #fff;
position: relative;
padding-bottom: 14px;
margin-bottom: 25px;
font-weight: 700;
font-size: 32px;
text-decoration: capitalize;
}
.main-service-section-xml .title span{
color: #358ea3;
}
.main-service-section-xml .title:before{
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 140px;
height: 3px;
background-color: #358ea3;
transform: translateX(-50%);
}
.main-service-section-xml .main-service-column-xml{
max-width: 33.333333%;
padding: 0 15px;
}
.main-service-section-xml .main-service-column-xml .main-single-service-xml{
position: relative;
margin-top: 30px;
background-color: #ffffff;
border-radius: 5px;
padding: 40px 30px;
overflow: hidden;
text-align: center;
}
.main-service-section-xml .main-service-column-xml .main-single-service-xml .content{
position: relative;
z-index: 20;
}
.main-service-section-xml .main-service-column-xml .main-single-service-xml .content .icon{
display: inline-block;
margin-bottom: 25px;
width: 70px;
height: 70px;
background-color: #358ea3;
border-radius: 5px;
border-radius: 50px;
line-height: 70px;
text-align: center;
color: #fff;
font-size: 30px;
transition: all 0.5s;
}
.main-service-section-xml .main-service-column-xml .main-single-service-xml .content .main-title{
margin-bottom: 20px;
font-size: 23px;
font-weight: 700px;
color: #101010;
transition: color 0.3s;
}
.main-service-section-xml .main-service-column-xml .main-single-service-xml:hover .main-title{
color: #fff;
}
.main-service-section-xml .main-service-column-xml .main-single-service-xml .content .des{
margin-bottom: 20px;
letter-spacing: 1px;
font-size: 15px;
font-weight: 500;
color: #838383;
transition: color 0.3s;
}
.main-service-section-xml .main-service-column-xml .main-single-service-xml:hover .des{
color: #fff;
}
.main-service-section-xml .main-service-column-xml .main-single-service-xml .content .learn-more{
color: #101010;
text-decoration: none;
font-size: 18px;
position: relative;
font-weight: 500;
transition: color .3s;
}
.main-service-section-xml .main-service-column-xml .main-single-service-xml:hover .learn-more{
color: #fff;
}
.main-service-section-xml .main-service-column-xml .main-single-service-xml .content .learn-more:after{
content: '';
position: absolute;
bottom: -2px;
left: 0;
right: 0;
height: 2px;
background-color: #358ea3;
transition: backgound-color .3s;
}
.main-service-section-xml .main-service-column-xml .main-single-service-xml:hover .learn-more:after{
background-color: #fff;
}
.main-service-section-xml .main-service-column-xml .main-single-service-xml .circle-hover-animation{
position: absolute;
top: 0;
right: 0;
transform: translate(80%, -75%);
width: 150px;
height: 150px;
background-color: #358ea3;
border-radius: 50%;
transition: all 0.6s;
}
.main-service-section-xml .main-service-column-xml .main-single-service-xml:hover .circle-hover-animation{
width: 100%;
height: 100%;
transform: none;
border-radius: 0;
opacity: 0.8;
}
.main-service-section-xml .main-service-column-xml .main-single-service-xml:hover .icon{
background-color: #fff;
color: #358ea3;
border-radius: 50px;
transition: all 0.5s;
}
@media only screen and (max-width: 600px)
{
.main-service-section-xml .main-service-column-xml
{
max-width: 90.333333%;
padding: 0 15px;
}
}
@media (min-width: 768px) and (max-width: 1024px)
{
.main-service-section-xml .main-service-column-xml
{
max-width: 47.333333%;
padding: 0 15px;
}
}And there you have it – a responsive services card design with hover animation using HTML and CSS. By incorporating this design element on your website, you can showcase your services or offerings in a visually appealing and interactive way, making it more engaging for users. Remember to test your design on different devices to ensure it looks good and functions properly.
Conclusion
In conclusion, with the increasing importance of a user-friendly and visually appealing website, incorporating design elements like responsive services card with hover animation can greatly enhance the overall look and feel of your website. So why not give it a try and see the impact it can have on your website’s design and user experience.
