100+ CSS Hover Effects

Last Updated on by in CSS Examples
Hover Effect

Welcome to our site! If you are looking for a handpicked CSS hover effects collection, you’re in the right place! In this curated assortment, we are excited to present mesmerizing free HTML and CSS hover effects code examples with eye-catching demos. We have sourced these hover animations from reliable platforms like GitHub and CodePen.

Hover effects play an important role in enhancing the visual appeal of an UI element on a mouse hover, enhancing interactivity and user interaction on a website by showing clickable areas, or providing visual feedback through color, size, text, or animation adjustments.

Each piece of code in this beautiful collection was carefully chosen to show how to make animations that are both fun and creative while also keeping the design balanced. Our collection has a wide range of hover effects, from glitchy text effects and 3D perspective hovers to advanced card hovers and image hover effects.

These cool hover effects are light-weight, small, load quickly, and are easy to change to fit your design needs because they are created using pure CSS HTML, and little bit of JavaScript. You can use these code examples to add a touch of sophistication and grace to your navigation menu, make interesting image galleries, or draw attention to certain parts of your page. They will help you get started with creating captivating hover effects.

Check out what CSS hover effects can do to let your imagination run wild. These mesmerizing effects let you make immersive and interactive user experiences that will stick with people who visit your website.

Get ready to take your website to new heights by using these carefully selected examples of CSS hover effects.

01. 3d image hover effect

See the Pen
3d image hover effect
by Dev (@lookingfordev)
on CodePen.

Author: Dev @lookingfordev
Links: Source Code / Demo
Created on: June 19, 2018
Made with: HTML, CSS

02. Card pseudo-element hover

See the Pen
Card pseudo-element hover
by douglasmofet (@douglasmofet)
on CodePen.


Author: Douglasmofet @douglasmofet
Links: Source Code / Demo
Created on: June 9, 2020
Made with: HTML, CSS(SCSS)

03. [CPC] Tile hover multi-button

See the Pen
[CPC] Tile hover multi-button
by Zed Dash (@z-)
on CodePen.


Author: Zed Dash 
Links: Source Code / Demo
Created on: January 8, 2020
Made with: HTML(Pug), CSS (SCSS)

04. Underline on hover

See the Pen
Underline on hover
by NANOUU (@antoniasymeonidou)
on CodePen.


Author: NANOUU @antoniasymeonidou
Links: Source Code / Demo
Created on: January 20, 2022
Made with: HTML, CSS

05. Box with magic zoom effect

See the Pen
Box with magic zoom effect
by Yancy Min (@yancy)
on CodePen.


Author: Yancy Min @yancy
Links: Source Code / Demo
Created on: July 20, 2018
Made with: HTML, CSS, JS

06. Hover For Product Info

See the Pen
Hover For Product Info
by Siddharth Hubli (@SRHubli)
on CodePen.


Author: Siddharth Hubli @SRHubli
Links: Source Code / Demo
Created on: October 7, 2018
Made with: HTML, CSS

07. Glitch Effect on Hover

See the Pen
Glitch Effect on Hover
by Ryan Yu (@iamryanyu)
on CodePen.


Author: Ryan Yu @iamryanyu
Links: Source Code / Demo
Created on: March 17, 2018
Made with: HTML, CSS(SCSS)

08. connections{css hover fx}

See the Pen
connections{css hover fx}
by ycw (@ycw)
on CodePen.


Author: Ycw @ycw
Links: Source Code / Demo
Created on: January 6, 2020
Made with: HTML(Pug), CSS (Less)

09. Pure CSS 3D perspective render + :hover anim

See the Pen
Pure CSS 3D perspective render + :hover anim
by Rafael González (@rgg)
on CodePen.


Author:  Rafael González @rgg
Links: Source Code / Demo
Created on: March 17, 2015
Made with: HTML, CSS(SCSS)

10. Card Hover Info Interaction

See the Pen
Card Hover Info Interaction | Best in Chrome
by Sikriti Dakua (@dev_loop)
on CodePen.


Author: Sikriti Dakua @dev_loop
Links: Source Code / Demo
Created on: June 10, 2020
Made with: HTML, CSS(SCSS)

11. Animated Box with Hover Effects

See the Pen
Animated Box with Hover Effects
by Avi Thour (@avithour)
on CodePen.


Author: Avi Thour @avithour
Links: Source Code / Demo
Created on: July 5, 2018
Made with: HTML, CSS

12. Yin & yang cats

See the Pen
Yin & yang cats
by Mikael Ainalem (@ainalem)
on CodePen.


Author: Mikael Ainalem @ainalem
Links: Source Code / Demo
Created on: July 25, 2021
Made with: HTML, CSS

13. Hover Effect Like Super Team Deluxe

See the Pen
Hover Effect Like Super Team Deluxe
by Fitri Ali (@fitri)
on CodePen.


Author: Fitri Ali @fitri
Links: Source Code / Demo
Created on: September 15, 2018
Made with: HTML, CSS (SCSS)

14. Image Hover Effect

See the Pen
Image Hover Effect – pure css – #18
by Ivan Grozdic (@ig_design)
on CodePen.


Author: Ivan Grozdic @ig_design
Links: Source Code / Demo
Created on: July 25, 2020
Made with: HTML, CSS

15. CSS OS Dock [CSS :has(), lerp custom props]

See the Pen
CSS OS Dock [CSS :has(), lerp custom props]
by Jhey (@jh3y)
on CodePen.


Author: Jhey @jh3y
Links: Source Code / Demo
Created on: August 25, 2022
Made with: HTML, CSS

16. Mouse-Out Hover Effect: Final

See the Pen
Mouse-Out Hover Effect: Final
by Geoff Graham (@geoffgraham)
on CodePen.


Author: Geoff Graham @geoffgraham
Links: Source Code / Demo
Created on: December 30, 2021
Made with: HTML, CSS

17. Hover Effect: Pop and Background Animate

See the Pen
Hover Effect: Pop and Background Animate
by David Leininger (@davidleininger)
on CodePen.


Author: David Leininger @davidleininger
Links: Source Code / Demo
Created on: June 7, 2018
Made with: HTML, CSS (SCSS)

18. Item animation (Hover)

See the Pen
Item animation (Hover)
by Wikyware Net (@wikyware-net)
on CodePen.


Author: Wikyware Net @wikyware-net
Links: Source Code / Demo
Created on: September 15, 2021
Made with: HTML, CSS,JS

19. Box corners animation

See the Pen
Box corners animation
by Lukáš Werner (@Sherpa23)
on CodePen.


Author: Lukáš Werner @Sherpa23
Links: Source Code / Demo
Created on: June 22, 2018
Made with: HTML, CSS(SCSS)

20. CSS Only “hologram” effect Button 3D Icon

See the Pen
CSS Only “hologram” effect Button 3D Icon
by Takane Ichinose (@takaneichinose)
on CodePen.


Author: Takane Ichinose @takaneichinose
Links: Source Code / Demo
Created on: August 4, 2020
Made with: HTML(Pug) , CSS (SCSS)

21. Youtube card

See the Pen
Youtube card
by Quentin Veron (@VeronQ)
on CodePen.


Author: Quentin Véron @VeronQ
Links: Source Code / Demo
Created on: March 3, 2018
Made with: HTML(Pug) , CSS (SCSS), JS

22. Cool frame hover effect (CSS Only)

See the Pen
Cool frame hover effect (CSS Only)
by Temani Afif (@t_afif)
on CodePen.


Author: Temani Afif @t_afif
Links: Source Code / Demo
Created on: August 30, 2022
Made with: HTML, CSS (SCSS)

23. Multiple hover’s for one animation

See the Pen
Multiple hover’s for one animation
by Silvio (@silvio-r)
on CodePen.


Author: Silvio @silvio-r
Links: Source Code / Demo
Created on: November 27, 2021
Made with: HTML, CSS (SCSS)

24. Radial Gradient Spotlight Effect

See the Pen
Radial Gradient Spotlight Effect
by George W. Park (@GeorgePark)
on CodePen.


Author: George W. Park @GeorgePark
Links: Source Code / Demo
Created on: May 15, 2018
Made with: HTML, CSS, JS(Babel)

25. Supa Dupa Fly Hover

See the Pen
Supa Dupa Fly Hover
by Ryan Mulligan (@hexagoncircle)
on CodePen.

Author: Ryan Mulligan @hexagoncircle
Links: Source Code / Demo
Created on: August 14, 2020
Made with: HTML (Pug, CSS

26. CSS-only Fade Siblings on Hover

See the Pen
CSS-only Fade Siblings on Hover
by Shaw (@shshaw)
on CodePen.


Author: Shaw @shshaw
Links: Source Code / Demo
Created on: August 8, 2016
Made with: HTML, CSS

27. Full CSS growing dot effect

See the Pen
Full CSS growing dot effect
by Vincent Durand (@onediv)
on CodePen.


Author: Vincent Durand @onediv
Links: Source Code / Demo
Created on: December 16, 2021
Made with: HTML (Haml), CSS (SCSS)

28. One div hover animation

See the Pen
One div hover animation
by Cassidy (@cassidoo)
on CodePen.


Author: Cassidy Williams @cassidoo
Links: Source Code / Demo
Created on: September 5, 2017
Made with: HTML, CSS

29. CSS Nugget: styling siblings on hover

See the Pen
CSS Nugget: styling siblings on hover
by CodyHouse (@codyhouse)
on CodePen.


Author: CodyHouse @codyhouse
Links: Source Code / Demo
Created on: May 18, 2020
Made with: HTML, CSS(SCSS)

30. Icons hovering

See the Pen
Icons hovering – #002
by Ying Ying Szero (@yingyingszeto)
on CodePen.


Author: Ying Ying Szeto @yingyingszeto
Links: Source Code / Demo
Created on: April 18, 2018
Made with: HTML, CSS

31. Pattern + Background Combo

See the Pen
Pattern + Background Combo
by Brian Bale (@brianbale)
on CodePen.


Author: Brian Bale @brianbale
Links: Source Code / Demo
Created on: November 23, 2020
Made with: HTML, CSS (SCSS)

32. CSS Hover effect

See the Pen
_ CSS Hover effect _
by Jeremie Boulay (@Jeremboo)
on CodePen.


Author: Jeremie Boulay @Jeremboo
Links: Source Code / Demo
Created on: March 01, 2016
Made with: HTML, CSS(Stylus)

33. Piece {css hover fx}

See the Pen
piece{css hover fx}
by ycw (@ycw)
on CodePen.


Author: Ycw @ycw
Links: Source Code / Demo
Created on: January 5, 2020
Made with: HTML(Pug), CSS (Less)

34. Button Hover Animation

See the Pen
Button Hover Animation
by Bhautik Bharadava (@bhautikbharadava)
on CodePen.


Author: Bhautik Bharadava @bhautikbharadava
Links: Source Code / Demo
Created on: January 23, 2019
Made with: HTML, CSS(SCSS)

35. CSS mouse-out transition effect

See the Pen
CSS mouse-out transition effect
by Adam Argyle (@argyleink)
on CodePen.


Author: Adam Argyle @argyleink
Links: Source Code / Demo
Created on: December 1, 2020
Made with: HTML, CSS

36. Fluent Design: Rebuild

See the Pen
Fluent Design: Rebuild
by Antoinette Janus (@internette)
on CodePen.


Author: Antoinette Janus @internette
Links: Source Code / Demo
Created on: April 10, 2018
Made with: HTML (Pug) ,CSS (SCSS)

37. Exploding Box Hover

See the Pen
Exploding Box Hover
by Philip Zastrow (@zastrow)
on CodePen.


Author: Philip Zastrow @zastrow
Links: Source Code / Demo
Created on: July 7, 2022
Made with: HTML, CSS

38. Animation hover effect

See the Pen
Animation hover effect
by Nicola Pressi (@ibanez182)
on CodePen.


Author: Nicola Press @ibanez182
Links: Source Code / Demo
Created on: October 6, 2015
Made with: HTML(Haml), CSS(SCSS)

39. Fancy slide-in hover | CSS only

See the Pen
Fancy slide-in hover | CSS only
by Håvard Brynjulfsen (@havardob)
on CodePen.


Author: Håvard Brynjulfsen @havardob
Links: Source Code / Demo
Created on: April 25, 2020
Made with: HTML, CSS(SCSS), JS

40. Cool hover animation

See the Pen
Cool hover animation
by Tonifuzi (@tonifuzi)
on CodePen.


Author: Tonifuzi @tonifuzi
Links: Source Code / Demo
Created on: December 23, 2016
Made with: HTML, CSS

41. Transforming Edges- smooth and sharp

See the Pen
Transforming Edges – #CodePenChallenge: smooth and sharp
by Melissa Em (@meowwwls)
on CodePen.


Author: Melissa Em @meowwwls
Links: Source Code / Demo
Created on: October 22, 2019
Made with: HTML, CSS (SCSS)

42. Zig-zag border & cool hover effect

See the Pen
Zig-zag border & cool hover effect
by Temani Afif (@t_afif)
on CodePen.


Author: Temani Afif @t_afif
Links: Source Code / Demo
Created on: July 29, 2022
Made with: HTML, CSS

43. Hover Panels POC

See the Pen
Hover Panels POC
by Jhey (@jh3y)
on CodePen.


Author: Jhey @jh3y
Links: Source Code / Demo
Created on: June 16, 2021
Made with: HTML(Pug) , CSS (Stylus)

44. Animated Border

See the Pen
Animated Border
by Christaelrod (@Christaelrod)
on CodePen.


Author: Christaelrod @Christaelrod
Links: Source Code / Demo
Created on: January 2, 2020
Made with: HTML, CSS

45. Refer Friends Hover Animation

See the Pen
Refer Friends Hover Animation
by Aysenur Turk (@TurkAysenur)
on CodePen.


Author: Aysenur Turk @TurkAysenur
Links: Source Code / Demo
Created on: March 15, 2020
Made with: HTML, CSS (SCSS)

46. Iris Wipe Transition

See the Pen
Iris Wipe Transition
by Will Boyd (@lonekorean)
on CodePen.


Author: Will Boyd @lonekorean
Links: Source Code / Demo
Created on: June 1, 2022
Made with: HTML, CSS

47. Frame hover effect with one element

See the Pen
Frame hover effect with one element
by Temani Afif (@t_afif)
on CodePen.


Author: Temani Afif @t_afif
Links: Source Code / Demo
Created on: August 24, 2022
Made with: HTML, CSS

48. 10 Stylish Hover Effects With LESS

See the Pen
10 stylish hover effects with less
by Renan C. Araujo (@caraujo)
on CodePen.


Author: Renan C. Araujo @caraujo
Links: Source Code / Demo
Created on: October 13, 2016
Made with: HTML, CSS(Less)

49. Art is pointless

See the Pen
Art is pointless
by Martin Whitaker (@sirnightowl)
on CodePen.


Author: Martin Whitaker @sirnightowl
Links: Source Code / Demo
Created on: March 11, 2020
Made with: HTML, CSS (SCSS),JS

50. Pure CSS Questionnaire Concept (hover items)

See the Pen
Pure CSS Questionnaire Concept (hover items)
by Nikolay Talanov (@suez)
on CodePen.

Author: Nikolay Talanov @suez
Links: Source Code / Demo
Created on: March 31, 2015
Made with: HTML, CSS (SCSS)

51. Underline-Animation

See the Pen
Underline-Animation
by Som Shekhar Mukherjee (@ssmkhrj)
on CodePen.


Author: Som Shekhar Mukherjee @SSMKHRJ
Links: Source Code / Demo
Created on: December 14, 2020
Made with: HTML, CSS

52. Attract hover effect

See the Pen
Attract hover effect
by Louis Hoebregts (@Mamboleoo)
on CodePen.


Author: Louis Hoebregts @Mamboleoo
Links: Source Code / Demo
Created on: July 7, 2017
Made with: HTML, CSS(SCSS), JS(Babel)

53. Team Profile Hover Effect

See the Pen
Team Profile Hover Effect
by Sparshcodes (@sparshgupta007)
on CodePen.


Author: Sparshcodes @sparshgupta007
Links: Source Code / Demo
Created on: June 11, 2021
Made with: HTML, CSS

54. Direction-aware 3D hover effect (Concept)

See the Pen
Direction-aware 3D hover effect (Concept)
by Noel Delgado (@noeldelgado)
on CodePen.


Author: Noel Delgado @noeldelgado
Links: Source Code / Demo
Created on: October 30, 2014
Made with: HTML(Haml), CSS(SCSS), JS(Babel)

55. Shape Zoom Transition

See the Pen
Shape Zoom Transition
by Will Boyd (@lonekorean)
on CodePen.


Author: Will Boyd @lonekorean
Links: Source Code / Demo
Created on: June 1, 2022
Made with: HTML, CSS

56. Lifted Paper Strips (Hover Effect)

See the Pen
Lifted Paper Strips (Hover Effect)
by Bastian Andre (@BastianAndre)
on CodePen.

Author: Bastian Andre @BastianAndre
Links: Source Code / Demo
Created on: November 17, 2016
Made with: HTML(Pug), CSS(Sass)

57. Rainbow stacked accordion animation

See the Pen
Rainbow stacked accordion animation
by Sarah Fossheim (@fossheim)
on CodePen.


Author: Sarah Fossheim @fossheim
Links: Source Code / Demo
Created on: March 8, 2020
Made with: HTML, CSS

58. Simple Tile Hover Effect

See the Pen
Simple Tile Hover Effect
by Chris Deacy (@chrisdothtml)
on CodePen.


Author: Chris Deacy @chrisdothtml
Links: Source Code / Demo
Created on: June 07, 2015
Made with: HTML(Pug), CSS(SCSS)

59. CSS only cool hover effect

See the Pen
CSS only cool hover effect
by Temani Afif (@t_afif)
on CodePen.

Author: Temani Afif @t_afif
Links: Source Code / Demo
Created on: June 1, 2022
Made with: HTML, CSS

60. CSS3 Hover Effects

See the Pen
CSS3 Hover Effects
by honglio (@honglio)
on CodePen.


Author: honglio @honglio
Links: Source Code / Demo
Created on: August 15, 2013
Made with: HTML, CSS(SCSS)

61. Subtle cross when hovering on a grid’s item corners

See the Pen
Subtle cross when hovering on a grid’s item corners
by Giorgos (@gsarig)
on CodePen.


Author: Giorgos @gsarig
Links: Source Code / Demo
Created on: December 24, 2020
Made with: HTML, CSS

62. Perspective Hover Effect

See the Pen
Perspective hover effect (CSS only)
by Maxime Lafarie (@maximelafarie)
on CodePen.


Author: Maxime Lafarie @maximelafarie
Links: Source Code / Demo
Created on: July 6, 2017
Made with: HTML, CSS

 63. Cool hover effect

See the Pen
Cool hover effect
by Temani Afif (@t_afif)
on CodePen.


Author: Temani Afif @t_afif
Links: Source Code / Demo
Created on: December 17, 2021
Made with: HTML, CSS

64. Creative Menu Hover Effects #

See the Pen
Creative Menu Hover Effects #
by abdel Rhman (@abdelRhman345)
on CodePen.


Author: abdel Rhman @abdelRhman345
Links: Source Code / Demo
Created on: January 19, 2019
Made with: HTML(Pug), CSS(SCSS)

65. Fullscreen background outline hover effect 60fps

See the Pen
Fullscreen background outline hover effect 60fps
by BROWNERD (@brownerd)
on CodePen.


Author: BROWNERD @brownerd
Links: Source Code / Demo
Created on: February 23, 2020
Made with: HTML(Pug) ,CSS (Stylus)

66. Hover Animation

See the Pen
Hover Animation
by Matt Boldt (@mattboldt)
on CodePen.


Author: Matt Boldt @mattboldt
Links: Source Code / Demo
Created on: July 8, 2013
Made with: HTML, CSS, JS

67. Tessellations eCommerce

See the Pen
Tessellations eCommerce
by Andy Barefoot (@andybarefoot)
on CodePen.


Author: Andy Barefoot @andybarefoot
Links: Source Code / Demo
Created on: August 18, 2019
Made with: HTML, CSS

68. Circular Ripple Hover Effect on Button

See the Pen
Circular Ripple Hover Effect on Button
by wifidev (@ViktorKorolyuk)
on CodePen.


Author: wifidev @ViktorKorolyuk
Links: Source Code / Demo
Created on: October 21, 2018
Made with: HTML, CSS, JS

69. Image Hover Effects

Hover Effect

Author: miketricking Mike Young
Links: Source Code / Demo
Created on: February 10, 2017
Made with: HTML, CSS

70. Dual image with hover effect

See the Pen
Dual image with hover effect
by Temani Afif (@t_afif)
on CodePen.


Author: Temani Afif @t_afif
Links: Source Code / Demo
Created on: August 19, 2022
Made with: HTML, CSS

71. Image with reflection and proximity effect on hover

See the Pen
Image with reflection and proximity effect on hover
by Tiago Alexandre Lopes (@TiagoLopes)
on CodePen.


Author: Tiago Alexandre Lopes @TiagoLopes
Links: Source Code / Demo
Created on: June 2, 2017
Made with: HTML, CSS

72. Staggered Animations

See the Pen
Staggered Animations
by Chris Coyier (@chriscoyier)
on CodePen.


Author: Chris Coyier @chriscoyier
Links: Source Code / Demo
Created on: August 12, 2019
Made with: HTML, CSS

73. Mapping Mouse Position in CSS

Author: Amit Sheen @amit_sheen
Links: Source Code / Demo
Created on: February 14, 2021
Made with: HTML, CSS (SCSS)

74. Let me see what you got!

See the Pen
Let me see what you got!
by Tobias Glaus (@tobiasglaus)
on CodePen.


Author: Tobias Glaus @tobiasglaus
Links: Source Code / Demo
Created on: July 25, 2018
Made with: HTML, CSS (SCSS)

75. CSS-only direction-aware hover effect

See the Pen
CSS-only direction-aware hover effect
by Paulina Hetman (@pehaa)
on CodePen.


Author: Paulina Hetman @pehaa
Links: Source Code / Demo
Created on: February 18, 2020
Made with: HTML, CSS(SCSS)

76. Futuristic 3D Hover Effect

See the Pen
Futuristic 3D Hover Effect ????
by Jouan Marcel (@jouanmarcel)
on CodePen.


Author: Jouan Marcel @jouanmarcel
Links: Source Code / Demo
Created on: September 5, 2018
Made with: HTML, CSS(SCSS)

77. Hover effect (CSS)

See the Pen
Hover effect (CSS)
by Amit Sheen (@amit_sheen)
on CodePen.


Author: Amit Sheen @amit_sheen
Links: Source Code / Demo
Created on: June 9, 2021
Made with: HTML, CSS (SCSS)

78. Pure CSS Circle Hover Affect

See the Pen
Pure CSS Circle Hover Affect
by Bradley Budach (@budachb)
on CodePen.


Author: Bradley Budach @budachb
Links: Source Code / Demo
Created on: October 24, 2018
Made with: HTML, CSS

79. Horizontal Wipe Transition

See the Pen
Horizontal Wipe Transition
by Will Boyd (@lonekorean)
on CodePen.


Author: Will Boyd @lonekorean
Links: Source Code / Demo
Created on: June 1, 2022
Made with: HTML, CSS

80. Stacked Cards Hover Effects

See the Pen
Stacked Cards Hover Effects
by Kyle Brumm (@kjbrum)
on CodePen.


Author: Kyle Brumm @kjbrum
Links: Source Code / Demo
Created on: March 23, 2017
Made with: HTML, CSS

81. Clip Path Hover Animation – Keyboard accessible

See the Pen
Clip Path Hover Animation – Keyboard accessible
by Vlad Racoare (@vladracoare)
on CodePen.


Author: Vlad Racoare @vladracoare
Links: Source Code / Demo
Created on: February 13, 2020
Made with: HTML, CSS(SCSS)

82. Cross-browser no image duplication reveal effect with real img elments

See the Pen
Cross-browser no image duplication reveal effect with real img elments
by Ana Tudor (@thebabydino)
on CodePen.


Author: Ana Tudor @thebabydino
Links: Source Code / Demo
Created on: January 26, 2021
Made with: HTML (Pug), CSS (SCSS)

83. Reveal Card Content on Hover

See the Pen
Reveal Card Content on Hover
by Mark Mead (@markmead)
on CodePen.


Author: Mark Mead @markmead
Links: Source Code / Demo
Created on: September 3, 2018
Made with: HTML(Pug) , CSS (SCSS)

84. CSS only Border hover effect

See the Pen
CSS only Border hover effect
by Temani Afif (@t_afif)
on CodePen.


Author: Temani Afif @t_afif
Links: Source Code / Demo
Created on: March 10, 2022
Made with: HTML, CSS

85. CSS 3D Hover

See the Pen
World Places (CSS 3d hover)
by Akhil Sai Ram (@akhil_001)
on CodePen.


Author: Akhil Sai Ram @akhil_001
Links: Source Code / Demo
Created on: December 24, 2016
Made with: HTML, CSS

86. Pure CSS Box Hover with Background Effect

See the Pen
Pure CSS Box Hover with Background Effect
by Paul (@Paul2512C)
on CodePen.


Author: Paul @Paul2512C
Links: Source Code / Demo
Created on: January 29, 2019
Made with: HTML, CSS

87. Hover and Scale Blocks UI Concept

See the Pen
Hover and Scale Blocks UI Concept – CSS Only!
by Emily Goldfein (@emilygoldfein)
on CodePen.


Author: Emily Goldfein @emilygoldfein
Links: Source Code / Demo
Created on: May 5, 2017
Made with: HTML, CSS

88. Fun with :hover

See the Pen
Fun with :hover
by Jesse Couch (@designcouch)
on CodePen.


Author: Jesse Couch @designcouch
Links: Source Code / Demo
Created on: January 29, 2020
Made with: HTML, CSS(SCSS)

89. Glowing Icon Hover Effect

See the Pen
Glowing Icon Hover Effect
by Diego Lopes (@dig-lopes)
on CodePen.


Author: Diego Lopes @dig-lopes
Links: Source Code / Demo
Created on: January 19, 2019
Made with: HTML, CSS

90. Kinetic Magnetic Dot •

See the Pen
Kinetic Magnetic Dot •
by Dronca Raul (@rauldronca)
on CodePen.


Author: Dronca Raul @rauldronca
Links: Source Code / Demo
Created on: December 18, 2018
Made with: HTML, CSS(SCSS), JS(Babel)

91. About Us Pop-Out Effect

See the Pen
About Us Pop-Out Effect
by Mikael Ainalem (@ainalem)
on CodePen.


Author: Mikael Ainalem @ainalem
Links: Source Code / Demo
Created on: February 8, 2021
Made with: HTML, CSS

92. Hover rays with masking and Houdini magic

See the Pen
Hover rays with masking and Houdini magic (Chromium only)
by Ana Tudor (@thebabydino)
on CodePen.


Author: Ana Tudor @thebabydino
Links: Source Code / Demo
Created on: February 11, 2021
Made with: HTML, CSS (SCSS)

93. More boxes

See the Pen
???? More boxes ????
by 0guzhan (@0guzhan)
on CodePen.


Author: Oguzhan @0guzhan
Links: Source Code / Demo
Created on: October 29, 2018
Made with: HTML, CSS (SCSS)

94. Pure CSS Hover Blur

See the Pen
Pure CSS Hover Blur
by Russ Pate (@russpate)
on CodePen.


Author: Russ Pate @russpate
Links: Source Code / Demo
Created on: January 17, 2017
Made with: HTML, CSS

95. CSS only hover effect

See the Pen
CSS only hover effect
by Temani Afif (@t_afif)
on CodePen.


Author: Temani Afif @t_afif
Links: Source Code / Demo
Created on: March 02, 2022
Made with: HTML, CSS

96. CSS3 Hover Effect using :after Psuedo Element

See the Pen
CSS3 Hover Effect using :after Psuedo Element
by Larry Geams Parangan (@larrygeams)
on CodePen.


Author: Larry Geams Parangan @larrygeams
Links: Source Code / Demo
Created on: October 9, 2013
Made with: HTML, CSS

97. Gallery Hover Effect

See the Pen
Gallery Hover Effect
by Bobby Korec (@bobbykorec)
on CodePen.


Author: Bobby Korec 
Links: Source Code / Demo
Created on: April 21, 2021
Made with: HTML, CSS

98. Hover effects overview

See the Pen
Hover effects overview
by Temani Afif (@t_afif)
on CodePen.


Author: Temani Afif @t_afif
Links: Source Code / Demo
Created on: May 20, 2022
Made with: HTML, CSS

99. Border Hover Effect

See the Pen
Border Hover Effect
by Diego Lopes (@dig-lopes)
on CodePen.


Author: Diego Lopes @dig-lopes
Links: Source Code / Demo
Created on: January 19, 2019
Made with: HTML, CSS