Collection of free HTML and CSS card hover effect code examples from codepen and other resources. Update of April 2019 collection. 12 new items.

Related Articles

  1. CSS Cards
  2. CSS Blog Cards
  3. CSS Card Layouts
  4. CSS Flip Cards
  5. CSS Material Design Cards
  6. CSS Movie Cards
  7. CSS Credit Cards
  8. CSS Product Cards
  9. CSS Profile Cards
  10. CSS Recipe Cards
  11. CSS Business Cards

Author

  • Codev Land

Made with

  • HTML / CSS

About a code

Profile Card Hover

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

Responsive: no

Dependencies: font-awesome.css

Author

  • Alex

Made with

  • HTML / CSS

About a code

Card Hover Effects

Responsive glassmorphism section with card hover effects.

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

Responsive: yes

Dependencies: -

Author

  • Tuan

Made with

  • HTML / CSS

About a code

Responsive Card Hover Effects

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

Responsive: no

Dependencies: -

Author

  • SANJIB KUMAR DEY

Made with

  • HTML / CSS (SCSS)

About a code

Card Hover Effect

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

Responsive: yes

Dependencies: -

Author

  • Nikhil

Made with

  • HTML / CSS

About a code

Responsive Card Hover Effect

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

Responsive: no

Dependencies: -

Author

  • Kodplay

Made with

  • HTML / CSS

About a code

Glowing Gradient Glassmorphism Card

CSS3 glowing gradient glassmorphism card hover effects.

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

Responsive: no

Dependencies: -

Author

  • Alex

Made with

  • HTML / CSS (SCSS)

About a code

Product Glassmorph

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

Responsive: yes

Dependencies: -

Author

  • Andrew Sims

Made with

  • HTML / CSS (SCSS)

About the code

Card Hover Effects

Card hover effect experiments in HTML and CSS.

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

Responsive: yes

Dependencies: -

Author

  • Rafaela Lucas

Made with

  • HTML / CSS

About the code

CSS Info Cards

CSS info cards with hover effect.

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

Responsive: yes

Dependencies: -

Author

  • MARK

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Reveal Card Content on Hover

Clean card hover effect.

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

Responsive: yes

Dependencies: material-icons.css

Author

  • Chhiring

Made with

  • HTML / CSS (SCSS)

About the code

Card Hover

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

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

Responsive: no

Dependencies: font-awesome.css

Author

  • karim jawha

Made with

  • HTML / CSS

About the code

Hovering Cards

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

Author

  • Andrew Mosby

Made with

  • HTML / CSS (SCSS)

About a code

Image and Text CSS-only Animation

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

Responsive: no

Dependencies: -

Author

  • yash arora

Made with

  • HTML (Pug) / CSS (Stylus)

About the code

Card Hover Effect

HTML and CSS card hover effect.

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

Responsive: no

Dependencies: -

Demo image: Same Height Cards

Author

  • Veronica

Made with

  • HTML / CSS

About the code

Same Height Cards

Same height cards with CSS flexbox and hover effect.

Demo image: Card Hover Interaction

Author

  • Kalyan Lahkar

Made with

  • HTML
  • CSS

About the code

Card Hover Interaction

Dribbble shot conversion of Nancy Nguyen titled Article Card Hover Interaction.

Demo image: Card Transition

Author

  • Angel Davcev

Made with

  • HTML (Pug) / CSS (Sass)

About the code

Card Transition

Hover effect for card with CSS transition.

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

Responsive: yes

Dependencies: -

Author

  • Mojtaba Seyedi

Made with

  • HTML / CSS (SCSS) / JavaScript

About the code

House of Cards

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

Author

  • YaroslavW

Made with

  • HTML / CSS

About the code

Card Hover Effect

Simple card hover effect in HTML and CSS.

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

Responsive: no

Dependencies: -

Author

  • Jorge Sanes

Made with

  • HTML / CSS

About the code

Card Hover

Pure CSS card hover effect.

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

Responsive: yes

Dependencies: -

Author

  • Zé Bateira

Made with

  • HTML / CSS

About the code

Jelly Effect in Card on Hover

Jelly effect in card on hover in HTML and CSS.

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

Responsive: no

Dependencies: -

Author

  • Knol

Made with

  • HTML / CSS

About the code

Material Card with Animated Featured Image

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