A collection of hand-picked jQuery card code examples: 3d, animated, flip, expanding, stacked, unfolding.

20 jQuery Cards

A collection of hand-picked jQuery card code examples: 3d, animated, flip, expanding, stacked, unfolding.

Related Articles

  1. CSS Cards

Author

  • Adam Kuhn

Made with

  • HTML (Haml) / CSS (SCSS) / JS

About a code

Friend Collector Cards

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js, faker.js

Author

  • Abdul-malik Mustapha

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, jquery.js

Author

  • Vincent Van Goggles

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, jquery.js, swiper.jquery.js

Author

  • Vladimir

Made with

  • HTML / CSS (Sass) / JS (Babel)

About a code

Blog Preview Modal

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

  • Zed Dash

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, jquery.js

Author

  • Adam Kuhn

Made with

  • HTML (Haml) / CSS (SCSS) / JS

About a code

Splitting.js Card

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: splitting.js, jquery.js

Author

  • Filipe Martins

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: jquery.js

Author

  • Aaron Griffis

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: jquery.js

Author

  • Zach

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: jquery.js

Author

  • Julie Park

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, jquery.js

Author

  • Andrew Canham

Made with

  • HTML / CSS (Less) / JS

About a code

Spread Cards

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

  • Nathan Taylor

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: jquery.js

Author

  • m

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: jquery.js

Author

  • Tobias Glaus

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: jquery.js

Author

  • Trevor L.J.M. McIntire

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: jquery.js

Author

  • Steve Gardner

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: jquery.js, tweenmax.js, snap.svg.js

Author

  • Alban Bujupaj

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: jquery.js

Author

  • David Foliti

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, jquery.js

Author

  • Jesse Couch

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: jquery.js

Author

  • Jon Beebe

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: jquery.js

back to top