Collection of hand-picked jQuery card code examples from Codepen and Github: 3d, animated, flip, expanding, stacked, unfolding. Update of October 2021 collection. 10 new examples.
Related Articles
Links
Made with
- HTML / CSS / JS
About a code
3D Interactive Card Hover
This is a small hover effect that rotates the card using CSS 3D transforms depending on where the mouse is on the card. The same calculation for determining the card rotation is used to set the glare position. This is modelled after Steam's 3D card interaction.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
Item Start Video
Item start video on hover with jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS / JS
About a code
3D Card
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
Animated Product Card
Animated product card using HTML, CSS and JavaScript.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: boxicons.css
Links
Made with
- HTML / CSS / JS
About a code
Click Responsive Shuffling Tarot Cards
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: tweenmax.js, easepack.js, cssplugin.js
Links
Made with
- HTML (Slim) / CSS (Sass) / JS
About a code
3D Card Profile SVG
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
UI Media Card
UI media card with jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Product Card
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Product Card UI
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
Featured Movies Card
Featured movies card with little jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Smart Card Holder
You probably have a credit card or two. And maybe even from different banks. Well, I think it would be cool to have one app with all your cards. Perhaps with basic functionality like account balance and money transfer. Not sure if one bank would be able to integrate with another, but guess we'll see, right?
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: gsap.js
Links
Made with
- HTML (Pug) / CSS (Sass) / JS
About a code
jQuery Animation: Card to Full Screen
Click each image to open using a nice mobile app style animation. Pinch to close each article and return to the image list.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: material-design-iconic-font.css, jquery.touchswipe.js
Links
Made with
- HTML / CSS / JS
About a code
Cards with Folded Corner
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css
Links
Made with
- HTML (Haml) / CSS (SCSS) / JS
About a code
Friend Collector Cards
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: faker.js
Links
Made with
- HTML / CSS (Less) / JS
About a code
Illustrative Stacked Cards
Stacked card with navigation in jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: animate.css
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Pokemon Card Holo Effect
Using color dodge blend mode on some backgrounds to create a "holographic" effect any Pokemon TCG collector will know!
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Pink Without Floyd Card
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css, slick.css, slick.js
Links
Made with
- HTML / CSS / JS
About a code
Interactive UI Cards
Cool UI cards that you can swipe through.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: swiper.css, swiper.jquery.js
Links
Made with
- HTML / CSS (Sass) / JS (Babel)
About a code
Blog Preview Modal
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Expanding Flex Cards
Expanding flex cards in jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css
Links
Made with
- HTML (Haml) / CSS (SCSS) / JS
About a code
Splitting.js Card
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: no
Dependencies: splitting.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Material Card
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: material-icons.css
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Figure & Figcaption Card
Figure & Figcaption card with jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Cards
This is the movie cards with full view of the trailer and infos about the series.
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Animated 3D Playing Card with Randomization
The value of the card gets randomized every time you flip it over.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Hoverable Expandable Blog Cards
Emulate iPhore appstore card tap zooming and expanding.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
User Profile
User profile design with hamburger drop down menu animation.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS (Less) / JS
About a code
Spread Cards
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Contact Me Card Animation
Click on the "Contact Me" button to see it in action.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS) / JS (Babel)
About a code
Info Cards
Animated info cards in jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Planets App SVG Animation
Clicking on a planet reveals more information about that planet.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS (Babel)
About a code
3D Product Card
3D product card in jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Unfolding Card
Unfolding card in jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Animated Video Grid
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Material Cards FlexBox
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Card Stack Tutorial Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Rebound: Lada Life
An ode to the classic Russian 4x4, the Lada Niva. Always broken, but never broken down.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: swiper.css, jquery.swiper.js

Links
Made with
- HTML / CSS / JS
About a code
Material Design Product Card
Product card component based on jQuery and Materialize.css. The component has buttons with simple engaging icons.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: materialize.css, materialize.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Card Effect
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Haml) / CSS (SCSS) / JS
About a code
jQuery User Profile
Fully responsive and animated user profile modal card.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (Less) / JS
About a code
Material Card Transformation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: d3.js
Links
Made with
- HTML / CSS (SCSS) / JS (Babel)
About a code
Environment Impact Cards
SVG animation with GSAP+MorphSVG, responsive. Hover on PC or tap on mobile.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: tweenmax.js, morphsvg.js
Links
Made with
- HTML (Pug) / CSS (Less) / JS
About a code
Animated Card Flip
Animated 3D card flip done in CSS and a little jQuery to help handle clicks and add and remove CSS classes. CSS animations powered by animista.net
Compatible browsers: Chrome, Edge, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
Material Design Card Animation
A quick little animation with a material-design card.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (Sass) / JS (CoffeeScript)
About a code
User Profile
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
jQuery Article Card UI
This example is an article card UI aimed more at mobile users although this could probably work for an article layout, click on the excerpt to view a bit more of the content and then you're presented with the option to read the full article. The animation could do with some work but I like the outcome.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Animated Weather Cards
Seamless animation between states, and some of animations break outside the container. Select the weather icons on the top to see each state.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: tweenmax.js, snap.svg.js
Links
Made with
- HTML / CSS / JS
About a code
Swipe the Cards
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: owl.carousel.js, tweenmax.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Clash of Clans Cards
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: slick.css, slick-theme.css, slick.js
Links
Made with
- HTML / CSS (Less) / JS
About a code
Seven Summits
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (Less) / JS
About a code
Ecommerce Single Item
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
E-Commerce Shop Card
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: slick.css, slick-theme.css, slick.js
Links
Made with
- HTML (Haml) / CSS (SCSS) / JS
About a code
Flexy Product Cards
This example was just a little play around using flexbox techniques, creating some super slick product cards with a swanky animation in jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Card 3D View Parallax
Card 3D view parallax in jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS) / JS
About a code
Information Card Slider
Material Design information card slider with jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Haml) / CSS (SCSS) / JS
About a code
3D Perspective Card XY
Used some jQuery to rotate the card on mouse movement.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Product Card
Simple product card with simple add to cart button animation.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: foundation.css, font-awesome.css
Links
Made with
- HTML / CSS (Less) / JS
About a code
Material Design Responsive Card
Card style based on Google Material color palette.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css, bootstrap.css
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Re-Order Stacked Cards
Just for fun.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (Sass) / JS
About a code
Download Cards
The cards also flip around to show a dynamically generated QR code.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: bootstrap.css, font-awesome.css, bootstrap.js, jquery.qrcode.js
Links
Made with
- HTML (Pug) / CSS (Less) / JS
About a code
Article News Card
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Google Now Inspired Flip Cards
Google Now style info cards with CSS card flip animation and jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css
Links
Made with
- HTML (Slim) / CSS (SCSS) / JS
About a code
Material Card Opening Effect
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS / JS
About a code
Product Card
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
jQuery Business Card
Save the trees with a digital business card.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Digital Business Card
The background image uses a CSS filter, so it's the same image that is behind the avatar. Managed to get rid of the white edges that come with this by offsetting the position and adding to the width.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS (Stylus) / JS
About a code
jQuery Card Flip
Simple card flip using CSS 3D transforms, transitions and jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS) / JS
About a code
jQuery Animated Card Stacks
Testing some simple animations to separate stacks of cards.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Haml) / CSS (SCSS) / JS
About a code
The Scattering
Stacked cards with randomized rotation. Renders a slightly scattered stack of cards with randomized rotation and transform-origin on each card.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -