Hey friends, today in this blog you'll learn how to create Vertical Card Sliding Animation using only HTML & CSS. Earlier I have shared a blog on how to create a Responsive Owl-Carousel Card Slider using HTML CSS & jQuery and now I'm going to create pure CSS Vertical Card Carousel Animation.
In this Vertical Card Slider, there are five minimal cards with profile image, username, user profession, and a follow button. All these cards slide vertically and appear one by one. On the webpage, there are only three cards that appear out of five, and only the center one card has full opacity and the other two cards are a little bit fade out and that you can also see in the preview image. When these cards are sliding and you hover on them then the animation of the cards will be paused which means it stops sliding.
You can copy the codes from the given boxes or download the code files from the given link because you won't get images if you only copy-paste the codes So I recommend you download the source code files instead of copying codes. Click here to download code files.
You might like this:
Creative Product Card UI Design
Pure CSS 3D Flip Card on Hover
Responsive Owl-Carousel Card Slider
Product Card with Fly to Card Animation
HTML CODE:
<!DOCTYPE html>
<!-- Created By CodingNepal - www.codingnepalweb.com -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Card Slider | CodingNepal</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="outer">
<div class="card" style="--delay:-1;">
<div class="content">
<div class="img"><img src="images/img-1.jpg" alt=""></div>
<div class="details">
<span class="name">Sumit Kapoor</span>
<p>Frontend Developer</p>
</div>
</div>
<a href="#">Follow</a>
</div>
<div class="card" style="--delay:0;">
<div class="content">
<div class="img"><img src="images/img-2.jpg" alt=""></div>
<div class="details">
<span class="name">Andrew Neil</span>
<p>YouTuber & Blogger</p>
</div>
</div>
<a href="#">Follow</a>
</div>
<div class="card" style="--delay:1;">
<div class="content">
<div class="img"><img src="images/img-3.jpg" alt=""></div>
<div class="details">
<span class="name">Jasmine Carter</span>
<p>Freelancer & Vlogger</p>
</div>
</div>
<a href="#">Follow</a>
</div>
<div class="card" style="--delay:2;">
<div class="content">
<div class="img"><img src="images/img-4.jpg" alt=""></div>
<div class="details">
<span class="name">Justin Chung</span>
<p>Backend Developer</p>
</div>
</div>
<a href="#">Follow</a>
</div>
<div class="card" style="--delay:2;">
<div class="content">
<div class="img"><img src="images/img-5.jpg" alt=""></div>
<div class="details">
<span class="name">Adrina Calvo</span>
<p>Teacher & Advertiser</p>
</div>
</div>
<a href="#">Follow</a>
</div>
</div>
</div>
</body>
</html>
CSS CODE:
@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{
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to bottom, #bea2e7 0%, #86b7e7 100%);
}
.wrapper .outer{
display: flex;
align-items: center;
justify-content: center;
}
.wrapper .card{
background: #fff;
width: 430px;
display: flex;
align-items: center;
padding: 20px;
opacity: 0;
pointer-events: none;
position: absolute;
justify-content: space-between;
border-radius: 100px 20px 20px 100px;
box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
animation: animate 15s linear infinite;
animation-delay: calc(3s * var(--delay));
}
.outer:hover .card{
animation-play-state: paused;
}
.wrapper .card:last-child{
animation-delay: calc(-3s * var(--delay));
}
@keyframes animate {
0%{
opacity: 0;
transform: translateY(100%) scale(0.5);
}
5%, 20%{
opacity: 0.4;
transform: translateY(100%) scale(0.7);
}
25%, 40%{
opacity: 1;
pointer-events: auto;
transform: translateY(0%) scale(1);
}
45%, 60%{
opacity: 0.4;
transform: translateY(-100%) scale(0.7);
}
65%, 100%{
opacity: 0;
transform: translateY(-100%) scale(0.5);
}
}
.card .content{
display: flex;
align-items: center;
}
.wrapper .card .img{
height: 90px;
width: 90px;
position: absolute;
left: -5px;
background: #fff;
border-radius: 50%;
padding: 5px;
box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
}
.card .img img{
height: 100%;
width: 100%;
border-radius: 50%;
object-fit: cover;
}
.card .details{
margin-left: 80px;
}
.details span{
font-weight: 600;
font-size: 18px;
}
.card a{
text-decoration: none;
padding: 7px 18px;
border-radius: 25px;
color: #fff;
background: linear-gradient(to bottom, #bea2e7 0%, #86b7e7 100%);
transition: all 0.3s ease;
}
.card a:hover{
transform: scale(0.94);
}
Top comments (1)
Great tutorial! I appreciate how you broke down each step, making it easy to follow. The explanation of form validation is especially helpful, as it ensures user inputs are correct before submission. I am a student of IB Schools in Hyderabad. Would love to see more examples like this for other types of elements. Keep up the good work!