jQuery card examples and plugins
Welcome to our collection of jQuery code examples! In this carefully curated compilation, we have gathered a wide array of code snippets that demonstrate the power and versatility of the jQuery library.
3D Interactive Card Hover
Josh Allen | February 11, 2022
HTML / CSS / JS
About a code
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.
Chrome, Edge, Firefox, Opera, Safari
no
-
jQuery Animation: Card to Full Screen
Brian Haferkamp | December 26, 2019
HTML (Pug) / CSS (Sass) / JS
About a code
Click each image to open using a nice mobile app style animation. Pinch to close each article and return to the image list.
Chrome, Edge, Firefox, Opera, Safari
yes
material-design-iconic-font.css, jquery.touchswipe.js
Pokemon Card Holo Effect
Simon Goellner | June 30, 2019
HTML / CSS (SCSS) / JS
About a code
Using color dodge blend mode on some backgrounds to create a "holographic" effect any Pokemon TCG collector will know!
Chrome, Edge, Firefox, Opera, Safari
yes
-
Rebound: Lada Life
James Bosworth | April 3, 2017
HTML / CSS (SCSS) / JS
About a code
An ode to the classic Russian 4x4, the Lada Niva. Always broken, but never broken down.
Chrome, Edge, Firefox, Opera, Safari
no
swiper.css, jquery.swiper.js
Material Design Product Card
loiff | March 6, 2017
HTML / CSS / JS
About a code
Product card component based on jQuery and Materialize.css. The component has buttons with simple engaging icons.
Chrome, Edge, Firefox, Opera, Safari
yes
materialize.css, materialize.js
Environment Impact Cards
Anton Mudrenok | December 22, 2016
HTML / CSS (SCSS) / JS (Babel)
About a code
SVG animation with GSAP+MorphSVG, responsive. Hover on PC or tap on mobile.
Chrome, Edge, Firefox, Opera, Safari
yes
tweenmax.js, morphsvg.js
Animated Card Flip
Ana Travas | November 10, 2016
HTML (Pug) / CSS (Less) / JS
About a code
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
Chrome, Edge, Opera, Safari
yes
-
Animated Weather Cards
Steve Gardner | August 22, 2016
HTML / CSS (SCSS) / JS
About a code
Seamless animation between states, and some of animations break outside the container. Select the weather icons on the top to see each state.
Chrome, Edge, Firefox, Opera, Safari
no
tweenmax.js, snap.svg.js
Discover Our Extensive Snippet Library
This heading suggests that your website provides a wide variety of snippets across different technologies, encouraging users to explore and use these resources for their development projects.
HTML Snippets.
Explore a collection of HTML snippets designed to streamline your web development process. From basic structures to complex elements.
CSS Snippets.
Discover powerful CSS snippets that help you style your web pages with ease. Whether you need layout solutions, animations
JavaScript Snippets.
Enhance your website's interactivity with our JavaScript snippets. From DOM manipulation to advanced algorithms
Bootstrap Snippets.
Leverage the power of Bootstrap with our collection of snippets. Quickly integrate responsive design components
Tailwind Snippets.
Speed up your development process with Tailwind CSS snippets. These utility-first CSS snippets enable you to
jQuery Snippets.
Simplify your JavaScript development with jQuery snippets. Easily perform common tasks like event handling, animations
Let's craft a visual identity that ignites passion and loyalty. ✨