69 jQuery Cards

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: -

About a code

Item Start Video

Item start video on hover with jQuery.

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

Responsive: yes

Dependencies: -

About a code

3D Card

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

Responsive: yes

Dependencies: -

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

About a code

Click Responsive Shuffling Tarot Cards

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

Responsive: yes

Dependencies: tweenmax.js, easepack.js, cssplugin.js

About a code

3D Card Profile SVG

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

Responsive: yes

Dependencies: -

About a code

UI Media Card

UI media card with jQuery.

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

Responsive: no

Dependencies: font-awesome.css

About a code

Product Card

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

Responsive: yes

Dependencies: -

About a code

Product Card UI

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

Responsive: yes

Dependencies: -

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

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

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

About a code

Cards with Folded Corner

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

Responsive: no

Dependencies: font-awesome.css

About a code

Friend Collector Cards

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

Responsive: no

Dependencies: faker.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

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: -

About a code

Pink Without Floyd Card

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

Responsive: yes

Dependencies: font-awesome.css, slick.css, slick.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

About a code

Blog Preview Modal

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

Responsive: yes

Dependencies: -

About a code

Expanding Flex Cards

Expanding flex cards in jQuery.

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

Responsive: no

Dependencies: font-awesome.css

About a code

Splitting.js Card

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: splitting.js

About a code

Material Card

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

Responsive: no

Dependencies: material-icons.css

About a code

Figure & Figcaption Card

Figure & Figcaption card with jQuery.

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

Responsive: no

Dependencies: -

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: -

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: -

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: -

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

About a code

Spread Cards

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

Responsive: yes

Dependencies: -

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: -

About a code

Info Cards

Animated info cards in jQuery.

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

Responsive: yes

Dependencies: -

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: -

About a code

3D Product Card

3D product card in jQuery.

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

Responsive: no

Dependencies: -

About a code

Unfolding Card

Unfolding card in jQuery.

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

Responsive: no

Dependencies: -

About a code

Animated Video Grid

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

Responsive: no

Dependencies: -

About a code

Material Cards FlexBox

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

Responsive: yes

Dependencies: -

About a code

Card Stack Tutorial Animation

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

Responsive: no

Dependencies: -

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

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

About a code

Card Effect

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

Responsive: no

Dependencies: -

About a code

jQuery User Profile

Fully responsive and animated user profile modal card.

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

Responsive: yes

Dependencies: -

About a code

Material Card Transformation

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

Responsive: no

Dependencies: d3.js

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

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: -

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: -

About a code

User Profile

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

Responsive: no

Dependencies: font-awesome.css

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: -

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

About a code

Swipe the Cards

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

Responsive: no

Dependencies: owl.carousel.js, tweenmax.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

About a code

Seven Summits

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

Responsive: yes

Dependencies: -

About a code

Ecommerce Single Item

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

Responsive: no

Dependencies: -

About a code

E-Commerce Shop Card

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

Responsive: no

Dependencies: slick.css, slick-theme.css, slick.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

About a code

Card 3D View Parallax

Card 3D view parallax in jQuery.

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

Responsive: no

Dependencies: -

About a code

Information Card Slider

Material Design information card slider with jQuery.

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

Responsive: no

Dependencies: -

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: -

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

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

About a code

Re-Order Stacked Cards

Just for fun.

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

Responsive: no

Dependencies: -

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

About a code

Article News Card

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

Responsive: yes

Dependencies: font-awesome.css

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

About a code

Material Card Opening Effect

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

Responsive: no

Dependencies: font-awesome.css

About a code

Product Card

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

Responsive: no

Dependencies: -

About a code

jQuery Business Card

Save the trees with a digital business card.

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

Responsive: yes

Dependencies: -

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

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: -

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: -

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: -