I created other card examples in the past that you can check here but in this post, you’ll get some animated cards along with their HTML & CSS.
Let’s see the animated card examples below:
Live preview of the animated cards
As you see in the above demo, I have a couple of animated cards that are made with only HTML & CSS. See their code below.
HTML
<div class="cards-holder">
<div class="card card-boxshadow">
<div class="card-header card-image">
<img src="https://source.unsplash.com/9gGvNWBeOq4">
</div>
<div class="card-body">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio dolores nesciunt nisi veniam eos quo magni illum odio possimus earum.
</div>
<div class="card-footer">
<button class="btn">Details</button>
<button class="btn btn-outline">Contact agent</button>
</div>
</div> <!-- .card -->
<div class="card">
<div class="card-header card-image">
<img src="https://source.unsplash.com/2gDwlIim3Uw">
</div>
<div class="card-body">
Sit amet consectetur lorem ipsum dolor adipisicing elit. Optio dolores earum nesciunt nisi veniam eos quo magni illum odio possimus.
</div>
<div class="card-footer">
<button class="btn">Details</button>
<button class="btn btn-outline">Contact agent</button>
</div>
</div> <!-- .card -->
<div class="card">
<div class="card-header">
Discover the world of adventure
</div>
<div class="card-body">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Optio dolores nesciunt nisi veniam eos quo magni illum odio possimus earum.
</div>
<div class="card-footer">
<button class="btn">Details</button>
<button class="btn btn-outline">Contact owner</button>
</div>
</div> <!-- .card -->
<div class="card card-boxshadow">
<div class="card-header">
Discover the world of adventure
</div>
<div class="card-body">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Optio dolores nesciunt nisi veniam eos quo magni illum odio possimus earum.
</div>
<div class="card-footer">
<button class="btn">Details</button>
<button class="btn btn-outline">Contact owner</button>
</div>
</div> <!-- .card -->
</div> <!-- .cards-holder -->Two of the cards have images and others don’t. Also, two of them have box shadows and others don’t. Every card is wrapped by the .card class/div.
The HTML markup is very straightforward and self-explanatory. However, if you have any questions let me know.
CSS
:root {
--btncolor: #EA4335;
--hovercolor: #b31b0e;
--padding: 1rem;
--heading: #122738;
}
.cards-holder {
display: -ms-grid;
display: grid;
-ms-grid-columns: (minmax(300px, 1fr))[auto-fit];
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1rem;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.cards-holder .card {
background-color: #FFFFFF;
border: 1px solid #0D3A58;
border-radius: .25rem;
overflow: hidden;
}
.cards-holder .card.card-boxshadow {
border: none;
-webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.3);
-webkit-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.cards-holder .card.card-boxshadow:hover {
-webkit-box-shadow: 3px 5px 8px 0 rgba(0, 0, 0, 0.5);
box-shadow: 3px 5px 8px 0 rgba(0, 0, 0, 0.5);
}
.cards-holder .card-header {
font-size: 1.275rem;
padding: var(--padding);
color: var(--heading);
}
.cards-holder .card-header.card-image {
padding: 0;
overflow: hidden;
}
.cards-holder .card-header.card-image img {
display: block;
width: 100%;
max-height: 200px;
aspect-ratio: 3 / 2;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.cards-holder .card-body {
padding: var(--padding);
font-size: 1rem;
color: black;
line-height: 1.7;
}
.cards-holder .card-footer {
padding: var(--padding);
}
.cards-holder .card-footer .btn {
background-color: var(--btncolor);
border: none;
padding: .5em 1.125rem;
color: white;
cursor: pointer;
border-radius: 25px;
font-size: .8rem;
text-transform: uppercase;
-webkit-transition: background-color 0.7s ease-in-out;
transition: background-color 0.7s ease-in-out;
}
.cards-holder .card-footer .btn.btn-outline {
background: none;
border: 1px solid var(--btncolor);
color: var(--hovercolor);
}
.cards-holder .card-footer .btn:hover {
background-color: var(--hovercolor);
}
.cards-holder .card-footer .btn.btn-outline:hover {
color: white;
}
.cards-holder .card-footer .btn + .btn {
margin-left: 1rem;
}
.cards-holder .card:hover > .card-header.card-image > img {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.cards-holder .card:hover:not(.card-boxshadow) > .card-body {
color: var(--hovercolor);
}The card animation is mostly created by the CSS transform property. Otherwise, the rest of the CSS is very basic that you’ll understand.
However, some of you may not familiar with the adjacent sibling combinator (+) that I used to create left-margin for the second button. If it’s you, please see the detail in the link I mentioned.
Lastly, I added all the required/necessary vendor prefixes so that the cards work properly on all web browsers.
Build HTML CSS projects
Conclusion
This is how you can create animated cards using only HTML & CSS. These cards are pretty simple but professional. And you can implement these designs on your own projects. Also, you can convert them into CMS-based templates like WordPress.
If you want to see more designs and new types of animated cards, let me know.
