25+ Incredible CSS Card Hover Effects (Free Code + Demos)
Enjoy this 100% free and open source collection of HTML and CSS card hover effect code examples. These pure CSS hover effects will impress your users for sure.
1. Social Card Hover 2
Author: Adam Dipinto (AdamDipinto)
Links: Source Code / Demo
Created on: September 18, 2019
Made with: HTML, CSS
2. Card Transitions
Author: Angel Davcev (Gelsot)
Links: Source Code / Demo
Created on: December 14, 2017
Made with: Pug, Sass
CSS Pre-processor: Sass
JS Pre-processor: Babel
HTML Pre-processor: Pug
3. EC Card Hover
Author: Jorge Sanes (jorgesanes10)
Links: Source Code / Demo
Created on: January 24, 2017
Made with: HTML, CSS
4. CSS Info Cards - Hover
Author: Rafaela Lucas (rafaelavlucas)
Links: Source Code / Demo
Created on: November 12, 2018
Made with: HTML, SCSS
Tags: css-cards, cards, hover-effect, info cards
5. CSS Card Hover Effect Experiments
CSS Clip path Card Hover Effects | Only Using HTML & CSS
Author: Ahmad Emran (ahmadbassamemran)
Links: Source Code / Demo
Created on: July 24, 2019
Made with: HTML, CSS
Tags: css, html, hover, card, clip-path
6. Simple CARD Hover Effect
Author: YaroslavW (YaroslavW)
Links: Source Code / Demo
Created on: September 17, 2017
Made with: HTML, CSS
7. Steam Inspired Game Card Hover Effect
So I noticed the new library view on Steam has some cool game hover effects. So I thought I'd try create something similar in CSS.
Author: Andrew Hawkes (andrewhawkes)
Links: Source Code / Demo
Created on: November 22, 2019
Made with: HTML, SCSS, JS
Tags: hover, animations, cards, steam, gaming
8. Material Card With Animated Featured Image
Experiment with material design. Animates the featured image and headline and adds button when hovered.
Author: Knol (knolaust)
Links: Source Code / Demo
Created on: February 20, 2015
Made with: HTML, CSS
Tags: material, hover, card, animation, material design
9. Jelly Effect In Card On Hover
Jelly Effect in Card concept: http://www.materialup.com/posts/jelly-effect-in-card
Author: Zé Bateira (zebateira)
Links: Source Code / Demo, Www.materialup.com
Created on: December 12, 2015
Made with: HTML, CSS
Tags: svg, css, card, material
10. Profile Card Hover Over It Once
Author: Atul Prajapati (atulcodex)
Links: Source Code / Demo
Created on: March 29, 2019
Made with: HTML, CSS
11. Material Card With Animated Featured Image
Experiment with material design. Animates the featured image and headline and adds button when hovered.
Author: Knol (knolaust)
Links: Source Code / Demo
Created on: February 20, 2015
Made with: HTML, CSS
Tags: material, hover, card, animation, material design
12. CSS Card Hover Effects
Author: Jhonier Riascos Zapata (Jhonierpc)
Links: Source Code / Demo
Created on: September 14, 2019
Made with: HTML, CSS
13. CSS3 Cards Hover Effects
Author: Yifang Di (diyifang)
Links: Source Code / Demo
Created on: November 4, 2017
Made with: HTML, CSS
14. Blog Post Item
Post preview with Css animations and svg icon sprite
Author: Nodws (nodws)
Links: Source Code / Demo
Created on: September 24, 2016
Made with: HTML, CSS, JS
Tags: blog, post, animated, svg, icons
15. Portfolio Card: Hover Effect
Author: Sarah Elena (saelsa)
Links: Source Code / Demo
Created on: December 20, 2017
Made with: HTML, CSS
16. Pure CSS Card Hover Effects
Author: Jalin Burton (jalinb)
Links: Source Code / Demo
Created on: March 4, 2019
Made with: Haml, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Haml
17. CSS Flip Card Hover Effect
Author: Keith (keithaul)
Links: Source Code / Demo
Created on: February 7, 2019
Made with: HTML, CSS
18. Cards Hover Effects
Author: Span4ev (Span4ev)
Links: Source Code / Demo
Created on: February 13, 2018
Made with: Slim, Sass
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Slim
19. Card Hover Effect
Author: Elcan Simuratli (elcan-kerimov)
Links: Source Code / Demo
Created on: October 28, 2018
Made with: HTML, CSS
20. Creative Card Hover
Author: Aliyeva (Aliyeva07)
Links: Source Code / Demo
Created on: March 14, 2020
Made with: HTML, CSS
Tags: card, hover, creative, book, grid
More Awesome Lists:
Share: