40+ CSS Card Hover Effects

Are you looking for interactive card hover effects to captivate your site’s audience? In this collection, we are displaying 40+ HTML and CSS card hover code examples. These stunning card hover animations will quite easily add a dynamic touch to your web project.

From dynamic hover animation to subtle hover effects—our compilation of card hover effects offers the perfect tools to web designers and developers to make your design stand out. Whether it’s for your blog, eCommerce, or a portfolio project, these card hover effects will incorporate a visually striking user experience.

Let’s try out our top CSS card hover effects and explore the endless customisation options to add a touch of interactivity and usability.

1. Card transitions

See the Pen <a href="https://codepen.io/Gelsot/pen/xpGYyd"> Card transitions</a> by Angel Davcev (<a href="https://codepen.io/Gelsot">@Gelsot</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Angel Davcev
Source: Code / Demo
Created on: DECEMBER 15, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS (Sass)

2. Info Cards Concept

See the Pen <a href="https://codepen.io/yancy/pen/gBLLxz"> Info Cards Concept</a> by Yancy Min (<a href="https://codepen.io/yancy">@yancy</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Yancy Min
Source: Code / Demo
Created on: OCTOBER 8, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

3. Card hover effect experiments

See the Pen <a href="https://codepen.io/andrewsims/pen/mQoYwz"> Card hover effect experiments</a> by Andrew Sims (<a href="https://codepen.io/andrewsims">@andrewsims</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Andrew Sims
Source: Code / Demo
Created on: DECEMBER 3, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

4. Product Glassmorph

See the Pen <a href="https://codepen.io/alexkleinubing/pen/abBzMKe"> [WIP] Product Glassmorph</a> by Alex (<a href="https://codepen.io/alexkleinubing">@alexkleinubing</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Alex
Source: Code / Demo
Created on: FEBRUARY 1, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

5. Responsive Card Hover Effect

See the Pen <a href="https://codepen.io/_niikhil/pen/MWpeqby"> Responsive Card Hover Effect</a> by Nikhil (<a href="https://codepen.io/_niikhil">@_niikhil</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Nikhil
Source: Code / Demo
Created on: MAY 17, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

6. Jelly Effect in Card on hover

See the Pen <a href="https://codepen.io/zebateira/pen/zrvwGR"> Jelly Effect in Card on hover</a> by Zé Bateira (<a href="https://codepen.io/zebateira">@zebateira</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Zé Bateira
Source: Code / Demo
Created on: DECEMBER 13, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

7. Material Card with Animated Featured Image

See the Pen <a href="https://codepen.io/knolaust/pen/bNvZRQ"> Material Card with Animated Featured Image</a> by Knol (<a href="https://codepen.io/knolaust">@knolaust</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Knol
Source: Code / Demo
Created on: FEBRUARY 20, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

8. Same height cards

See the Pen <a href="https://codepen.io/veronicadev/pen/WJyOwG"> FlexBox Exercise #4 – Same height cards</a> by Veronica (<a href="https://codepen.io/veronicadev">@veronicadev</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Veronica
Source: Code / Demo
Created on: MAY 13, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

9. Card Hover Effect

See the Pen <a href="https://codepen.io/zwattic/pen/mKGRYm"> Card Hover Effect</a> by yash arora (<a href="https://codepen.io/zwattic">@zwattic</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Yash arora
Source: Code / Demo
Created on: JUNE 26, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS (Stylus)

10. Simple CARD hover effect

See the Pen <a href="https://codepen.io/YaroslavW/pen/WZQEza"> Simple CARD hover effect</a> by YaroslavW (<a href="https://codepen.io/YaroslavW">@YaroslavW</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: YaroslavW
Source: Code / Demo
Created on: SEPTEMBER 17, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

11. Product Card UI Design

See the Pen <a href="https://codepen.io/Natalio-R/pen/PoqaeoG"> PRODUCT CARD UI DESIGN</a> by Natalio R. (<a href="https://codepen.io/Natalio-R">@Natalio-R</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Natalio R
Source: Code / Demo
Created on: MARCH 18, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

12. CSS3 cards hover effects

See the Pen <a href="https://codepen.io/diyifang/pen/MOyvXw"> CSS3 cards hover effects</a> by Yifang Di (<a href="https://codepen.io/diyifang">@diyifang</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Yifang Di
Source: Code / Demo
Created on: NOVEMBER 4, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

13. Responsive Card Hover Effects

See the Pen <a href="https://codepen.io/keubibo/pen/yLXYVOK"> Responsive Card Hover Effects</a> by Tuan (<a href="https://codepen.io/keubibo">@keubibo</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Tuan
Source: Code / Demo
Created on: AUGUST 28, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

14. Hovering Cards

See the Pen <a href="https://codepen.io/kjawhar15/pen/zLBaPj"> hovering cards</a> by karim jawhar (<a href="https://codepen.io/kjawhar15">@kjawhar15</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Karim jawhar
Source: Code / Demo
Created on: JULY 18, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

15. HTML card hover effect

See the Pen <a href="https://codepen.io/stack-findover/pen/ZEKpyML"> CSS Card Hover Effect</a> by Stack Findover (<a href="https://codepen.io/stack-findover">@stack-findover</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Stack Findover
Source: Code / Demo
Created on: JULY 10, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

16. Card Animation

See the Pen <a href="https://codepen.io/makaveli-dev-web/pen/Roxoqa"> Card animation</a> by Makaveli (<a href="https://codepen.io/makaveli-dev-web">@makaveli-dev-web</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Makaveli
Source: Code / Demo
Created on: DECEMBER 1, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS (SCSS)

17. CSS Hover Card

See the Pen <a href="https://codepen.io/sowmyaseshadri/pen/KxQMEP"> CSS Hover Card 🛒</a> by Sowmya Seshadri (<a href="https://codepen.io/sowmyaseshadri">@sowmyaseshadri</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Sowmya Seshadri
Source: Code / Demo
Created on: SEPTEMBER 10, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

18. Card Hover

See the Pen <a href="https://codepen.io/chhiring90/pen/zLJLBG"> Card Hover</a> by Chhiring (<a href="https://codepen.io/chhiring90">@chhiring90</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Chhiring
Source: Code / Demo
Created on: AUGUST 7, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

19. Social Card Hover

See the Pen <a href="https://codepen.io/AdamDipinto/pen/JjPmxPe"> Social Card Hover 2</a> by Adam Dipinto (<a href="https://codepen.io/AdamDipinto">@AdamDipinto</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Adam Dipinto
Source: Code / Demo
Created on: SEPTEMBER 19, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

20. Cards – Codepen assets

See the Pen <a href="https://codepen.io/sowmyaseshadri/pen/vzjZxG"> Cards – Codepen assets</a> by Sowmya Seshadri (<a href="https://codepen.io/sowmyaseshadri">@sowmyaseshadri</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Sowmya Seshadri
Source: Code / Demo
Created on: SEPTEMBER 12, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

21. Card hover effects

See the Pen <a href="https://codepen.io/jasonheecs/pen/GNNwpZ"> Card hover effects</a> by Jason Hee (<a href="https://codepen.io/jasonheecs">@jasonheecs</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jason Hee
Source: Code / Demo
Created on: NOVEMBER 18, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

22. Card hover effect

See the Pen <a href="https://codepen.io/sanjib104/pen/JjWrbYq"> Card hover effect ( Selector on parent)</a> by SANJIB KUMAR DEY (<a href="https://codepen.io/sanjib104">@sanjib104</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: SANJIB KUMAR DEY
Source: Code / Demo
Created on: MAY 28, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

23. Responsive Card Hover Effect

See the Pen <a href="https://codepen.io/kodplay/pen/oNBreRJ"> Glowing Gradient Glassmorphism Card</a> by Kodplay (<a href="https://codepen.io/kodplay">@kodplay</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Kodplay
Source: Code / Demo
Created on: MAY 1, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

24. Card animation

See the Pen <a href="https://codepen.io/lamchang/pen/PQGQyR"> Card animation</a> by Lam Chang (<a href="https://codepen.io/lamchang">@lamchang</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Lam Chang
Source: Code / Demo
Created on: FEBRUARY 7, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

25. Sphere Gentle 3D

See the Pen <a href="https://codepen.io/197384265/pen/LoBjGB"> Sphere Gentle 3D</a> by semicorpus (<a href="https://codepen.io/197384265">@197384265</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: semicorpus
Source: Code / Demo
Created on: MAY 28, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

26. Reveal Card Content on Hover

See the Pen <a href="https://codepen.io/markmead/pen/MqmOVB"> Reveal Card Content on Hover</a> by Mark Mead (<a href="https://codepen.io/markmead">@markmead</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: MARK Mead
Source: Code / Demo
Created on: SEPTEMBER 3, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS (SCSS)

27. CSS Info Cards – Hover

See the Pen <a href="https://codepen.io/rafaelavlucas/pen/rQWJYG"> CSS Info Cards – Hover</a> by Rafaela Lucas (<a href="https://codepen.io/rafaelavlucas">@rafaelavlucas</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Rafaela Lucas
Source: Code / Demo
Created on: NOVEMBER 12, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

28. House of Cards

Author: Mojtaba Seyedi
Source: Code / Demo
Created on: SEPTEMBER 24, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

29. Profile card Hover

See the Pen <a href="https://codepen.io/codev_land/pen/yLXeyWX"> Profile card Hover</a> by Codev Land (<a href="https://codepen.io/codev_land">@codev_land</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Codev Land
Source: Code / Demo
Created on: AUGUST 30, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

30. Image Hover

See the Pen <a href="https://codepen.io/littlesnippets/pen/gweyPp"> #1566 – Image Hover</a> by LittleSnippets.net (<a href="https://codepen.io/littlesnippets">@littlesnippets</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: LittleSnippets.net
Source: Code / Demo
Created on: OCTOBER 10, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

31. Responsive Glassmorphism Section | Card Hover Effects

See the Pen <a href="https://codepen.io/AlexZab/pen/GREpYqp"> Responsive Glassmorphism Section | Card Hover Effects</a> by Alex (<a href="https://codepen.io/AlexZab">@AlexZab</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Alex
Source: Code / Demo
Created on: AUGUST 29, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

32. Card Hover Interaction | HTML & CSS

See the Pen <a href="https://codepen.io/dev_loop/pen/PoqLGvV"> Card Hover Interaction | HTML & CSS </a> by Sikriti Dakua (<a href="https://codepen.io/dev_loop">@dev_loop</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Sikriti Dakua
Source: Code / Demo
Created on: MARCH 31, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

33. EC card hover

See the Pen <a href="https://codepen.io/jorgesanes10/pen/QdMEXr"> EC card hover</a> by Jorge Sanes (<a href="https://codepen.io/jorgesanes10">@jorgesanes10</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jorge Sanes
Source: Code / Demo
Created on: JANUARY 25, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

34. Image and Text CSS-only Animation

See the Pen <a href="https://codepen.io/amosby/pen/bjGjKw"> Image and Text CSS-only Animation</a> by Andrew Mosby (<a href="https://codepen.io/amosby">@amosby</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Andrew Mosby
Source: Code / Demo
Created on: JULY 10, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

35. Card Hover Effects

See the Pen <a href="https://codepen.io/jangidajay702/pen/XWXqqGG"> Card Hover Effects</a> by Ajay jangid (<a href="https://codepen.io/jangidajay702">@jangidajay702</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ajay jangid
Source: Code / Demo
Created on: JULY 9, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

36. 3D Card Hover

See the Pen <a href="https://codepen.io/gayane-gasparyan/pen/wvxewXO"> 3D Card Hover</a> by Gayane Gasparyan (<a href="https://codepen.io/gayane-gasparyan">@gayane-gasparyan</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Gayane Gasparyan
Source: Code / Demo
Created on: JANUARY 13, 2023
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

37. CSS Glassmorphism Card Hover Effects

See the Pen <a href="https://codepen.io/luisoms/pen/PoGGRKp"> CSS Glassmorphism Card Hover Effects</a> by Luisoms (<a href="https://codepen.io/luisoms">@luisoms</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Luisoms
Source: Code / Demo
Created on: DECEMBER 10, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

38. Hearthstone Style Card Hover

See the Pen <a href="https://codepen.io/jackrugile/pen/WZGeGM"> Hearthstone Style Card Hover</a> by Jack Rugile (<a href="https://codepen.io/jackrugile">@jackrugile</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jack Rugile
Source: Code / Demo
Created on: SEPTEMBER 22, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS(SCSS)

39. CSS Clip-path Card Hover Effects

See the Pen <a href="https://codepen.io/ahmadbassamemran/pen/XvdEoO"> CSS Clip-path Card Hover Effects</a> by Ahmad Emran (<a href="https://codepen.io/ahmadbassamemran">@ahmadbassamemran</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ahmad Emran
Source: Code / Demo
Created on: JULY 24, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

40. Split Card Hover Effect

See the Pen <a href="https://codepen.io/simeydotme/pen/abqYGWa"> Split Card Hover Effect</a> by Simon Goellner (<a href="https://codepen.io/simeydotme">@simeydotme</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Simon Goellner
Source: Code / Demo
Created on: MAY 31, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS), JavaScript

41. Steam inspired game card hover effect

See the Pen <a href="https://codepen.io/andrewhawkes/pen/RwwOJrO"> Steam inspired game card hover effect</a> by Andrew Hawkes (<a href="https://codepen.io/andrewhawkes">@andrewhawkes</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Andrew Hawkes
Source: Code / Demo
Created on: NOVEMBER 23, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)