Collection of free HTML and CSS card hover effect code examples

Discover a collection of free HTML and CSS card hover effect code examples to create interactive and visually appealing card designs for your website.

Profile Card Hover

Author:
Codev Land | August 30, 2021
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
font-awesome.css

Card Hover Effects

Author:
Alex | August 29, 2021
Made with:
HTML / CSS

About a code

Responsive glassmorphism section with card hover effects.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Responsive Card Hover Effects

Author:
Tuan | August 28, 2021
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Card Hover Effect

Author:
SANJIB KUMAR DEY | May 28, 2021
Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Responsive Card Hover Effect

Author:
Nikhil | May 16, 2021
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Glowing Gradient Glassmorphism Card

Author:
Kodplay | April 30, 2021
Made with:
HTML / CSS

About a code

CSS3 glowing gradient glassmorphism card hover effects.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Product Glassmorph

Author:
Alex | February 1, 2021
Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Card Hover Effects

Author:
Andrew Sims | December 3, 2018
Made with:
HTML / CSS (SCSS)

About a code

Card hover effect experiments in HTML and CSS.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

CSS Info Cards

Author:
Rafaela Lucas | November 12, 2018
Made with:
HTML / CSS

About a code

CSS info cards with hover effect.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Info Cards Concept

Author:
Yancy Min | October 8, 2018
Made with:
HTML / CSS (SCSS)

About a code

Info cards concept with pretty design in HTML and CSS.

Compatible browsers:
Chrome, Edge, Opera, Safari
Responsive:
no
Dependencies:
font-awesome.css

Card Transitions

Author:
Sowmya Seshadri | September 12, 2018
Made with:
HTML / CSS (SCSS)

About a code

HTMl and CSS card with hover effect.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
font-awesome.css

Reveal Card Content on Hover

Author:
MARK | September 3, 2018
Made with:
HTML (Pug) / CSS (SCSS)

About a code

Clean card hover effect.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
material-icons.css

Card Hover

Author:
Chhiring | August 7, 2018
Made with:
HTML / CSS (SCSS)

About a code

Card hover effect with social icons and shapes in pure CSS.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
font-awesome.css

Hovering Cards

Author:
karim jawha | July 18, 2018
Made with:
HTML / CSS

About a code

3 cards that have a hovering effect, when a mouse hovers over one of the cards it stands up and for user to read clearly.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Image and Text CSS-only Animation

Author:
Andrew Mosby | July 10, 2018
Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Card Hover Effect

Author:
yash arora | June 26, 2018
Made with:
HTML (Pug) / CSS (Stylus)

About a code

HTML and CSS card hover effect.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
Same Height Cards

Same Height Cards

Author:
Veronica | May 13, 2018
Made with:
HTML / CSS

About a code

Same height cards with CSS flexbox and hover effect.

Card Animation

Card Animation

Author:
Lam Chang | February 6, 2018
Made with:
HTML / CSS

About a code

Card animation with CSS, HTML and some hover events.

Card Transition

Card Transition

Author:
Angel Davcev | December 14, 2017
Made with:
HTML (Pug) / CSS (Sass)

About a code

Hover effect for card with CSS transition.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

House of Cards

Author:
Mojtaba Seyedi | September 24, 2017
Made with:
HTML / CSS (SCSS) / JavaScript

About a code

Playing around with cool CSS features like custom properties, filters, clipping and ... 20 hover effects for card in HTML, CSS and little JS.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
anime.js

Card Hover Effect

Author:
YaroslavW | September 17, 2017
Made with:
HTML / CSS

About a code

Simple card hover effect in HTML and CSS.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Card Hover

Author:
Jorge Sanes | January 24, 2017
Made with:
HTML / CSS

About a code

Pure CSS card hover effect.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Card Animation

Author:
Makaveli | December 1, 2016
Made with:
HTML (Pug) / CSS (SCSS)

About a code

Little hover animation for event cards.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Jelly Effect in Card on Hover

Author:
Zé Bateira | December 12, 2015
Made with:
HTML / CSS

About a code

Jelly effect in card on hover in HTML and CSS.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Material Card with Animated Featured Image

Author:
Knol | February 20, 2015
Made with:
HTML / CSS

About a code

Experiment with material design. Animates the featured image and headline and adds button when hovered.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

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

React Snippets.

Build robust, component-based user interfaces with our React snippets. From state management to lifecycle methods,

Vue Snippets.

Streamline Vue.js development with our collection of snippets for creating components, managing state, and handling events.

Ready to set your Brand ablaze?

Let's craft a visual identity that ignites passion and loyalty. ✨