Vertical Card Sliding Animation using only HTML & CSS

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. 

The best thing about this animation and design is, it is created using only HTML & CSS. If you're feeling difficult to understand what I'm saying and want to see a demo of this design or video tutorial then you can watch a full video tutorial of this Vertical Card Slider Animation with the demo.

Video Tutorial of Vertical Cards Carousel Animation



In the video, you have seen the full video tutorial of Vertical Card Slider and you have known, this is a pure CSS program. If you are a beginner and you know a little bit of HTML & CSS then you can also create this type of card with creative animation. To create this follow button of this card, I used <a> tag so if you want to redirect your user to the particular wite then you can simply put the link of that site inside href attribute of anchor tag like this: <a href="your_link_here" target="_blank">

To create this animation of this design I used the CSS animation property that's it. If you like this animation and want to get source codes of this card then you can easily copy all the codes from the given copy boxes or you can also download source code files from the given download button and I also recommend you to download the files.

You might like this:


Vertical Cards Sliding Animation [Source Codes]

To create this program [Vertical Card Slider]. 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 into your file. You can also download the source code files of this sliding card animation from the below download button.

Note: If you copy the codes and paste them into your files then you won't get the images of this program. So download the source files of this program from the below download button and get all files, images that are used in this program. alert-info

HTML CODE:

CSS CODE:




Post a Comment

We welcome relevant and respectful comments. Off-topic or spam comments may be removed.

Previous Post Next Post
CodingNepal

Don't forget to Subscribe to our YouTube Channel.

Subscribe To CodingNepal