40+ CSS Card Hover Effects

Collection of 40+ HTML and CSS card hover code examples. Each hover effect is unique and stylish, adds a dynamic touch to your web project.

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)