Hello readers, Today in this blog you’ll learn how to create a Responsive CSS Card with Hover Animation in HTML and CSS only. Previously I have shared an Animated Login Form with Glowing Inputs Login Form, now it’s time to create Responsive Cards using only HTML & CSS.
A card is a small rectangular module with images and text. To balance the usability of the interface, the card UI design is a default choice. Because cards are easy to use, they can also display content that contains different details.
As you can see in the image these are Profile Cards which is based in only HTML & CSS. At first, these cards in the initial stage where contents of the cards are hidden and only images are shown but when you hover on the specific card the contents of the card smoothly slide down and show.
If you’re feeling difficulty understanding what I am saying. You can watch a full video tutorial on this program (Responsive CSS Card Design with Hover Animation).
Video Tutorial of Responsive Profile CSS Card Design
I believe this will help beginners to understand the code of creating the card. If you have basic knowledge of HTML & CSS then you can use these cards in your website and projects after change some lines of codes.
If you like this program (Responsive CSS Cards Design with Hover Animation)Â and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.
You might like this:
Responsive CSS Card with Hover Animation [Source Codes]Â
To create this program (Responsive CSS Card Design with Hover Animation). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Profile UI Card Design | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<div class="card">
<div class="img">
<img src="#">
</div>
<div class="top-text">
<div class="name">
Annie Lea
</div>
<p>
Apps Developer
</p>
</div>
<div class="bottom-text">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
</div>
<div class="btn">
<a href="#">Read more</a>
</div>
</div>
</div>
<div class="card">
<div class="img">
<img src="#">
</div>
<div class="top-text">
<div class="name">
Eliana Maia
</div>
<p>
Website Developer
</p>
</div>
<div class="bottom-text">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
</div>
<div class="btn">
<a href="#">Read more</a>
</div>
</div>
</div>
<div class="card">
<div class="img">
<img src="#">
</div>
<div class="top-text">
<div class="name">
Harley Briana
</div>
<p>
Graphic Developer
</p>
</div>
<div class="bottom-text">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
</div>
<div class="btn">
<a href="#">Read more</a>
</div>
</div>
</div>
</div>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,body{
height: 100%;
display: grid;
place-items: center;
background: #f2f2f2;
text-align: center;
}
.container{
padding: 0 40px;
display: flex;
align-items: center;
justify-content: space-between;
}
.card{
height: 280px;
max-width: 350px;
margin: 0 20px;
background: white;
transition: 0.4s;
box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}
.card:hover{
height: 470px;
box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
}
.card .img{
height: 200px;
width: 100%;
}
.card .img img{
height: 100%;
width: 100%;
object-fit: cover;
}
.card .top-text{
padding: 5px;
}
.card .top-text .name{
font-size: 25px;
font-weight: 600;
color: #202020;
}
.card .top-text p{
font-size: 20px;
font-weight: 600;
color: #e74c3c;
line-height: 20px;
}
.card .bottom-text{
padding: 0 20px 10px 20px;
margin-top: 5px;
background: white;
opacity: 0;
visibility: hidden;
transition: 0.1s;
}
.card:hover .bottom-text{
opacity: 1;
visibility: visible;
}
.card .bottom-text .text{
text-align: justify;
}
.card .bottom-text .btn{
margin: 10px 0;
text-align: left;
}
.card .bottom-text .btn a{
text-decoration: none;
background: #e74c3c;
color: #f2f2f2;
padding: 5px 8px;
border-radius: 3px;
display: inline-flex;
transition: 0.2s;
}
.card .bottom-text .btn a:hover{
transform: scale(0.9);
}
@media screen and (max-width: 978px) {
.container{
flex-wrap: wrap;
flex-direction: column;
}
.card{
max-width: 700px;
margin: 20px 0;
}
}
That’s all, now you’ve successfully created a Responsive CSS Cards Design with Hover Animation in HTML & CSS. If your code does not work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.
Sir Every thing is fine but read more button is not working.
Can we develop this and use it for our website?
Yes, you can use it.
what if i need many card like this to show in slide effect, will it work in this design?
Please download the code files from the above link and check the images size.
Hi! Awesome work. Thank you!
What is the pictures best resolution to show them in full size?
Download code files instead of copying codes.
hi brother
Everything is fine but im not getting my images in the page.