Hello Dear Readers, Today In this Post, You will learn How to Create Vertical Card Sliding Animation Using Only HTML & CSS | Pure CSS Slider. Earlier I have shared Create Responsive Modal Popup Box Using Bootstrap 5. and now it’s time to Vertical Card Sliding Animation | Pure CSS Slider.
In this Vertical Card Slider, there are a few minimal cards with profile images, 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 faded 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.
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 the source codes of this card then you can easily copy all the codes from the given copy boxes.
To create this program [Vertical Card Sliding 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 into your file.
Now using CSS I have placed all the elements in the right place, as you can see in the preview. I gave style to elements like a shadow, color, position, etc. Inside the HTML tags. In the CSS file, I have heavily used the transform command and gave max-width to some elements like images.
For creating this program you have to create 2 files. First, for the HTML, the second one is for CSS. Follow the steps to create this without any error. A well-designed, touch-enabled, and fully responsive slider. It equally works on almost all modern browsers.
These colorful card slider templates come with colored borders to give it a cool look and design. It is also resizable using a click and drag action which makes it bigger vertically. You can change the colors to suit what you really want to archive.
HTML
CSS
Great blog article.Thanks Again. Great.