125+ CSS Hover Effects

Checkout these eye-catching, visually stunning free 125+ HTML and CSS hover effect code examples. Each item is created to awestruck your site visitors.

1. Link Hover Effects

See the Pen <a href="https://codepen.io/P233/pen/VwejRg"> Link Hover Effects</a> by Peiwen Lu (<a href="https://codepen.io/P233">@P233</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Peiwen Lu
Source: Code / Demo
Created on: APRIL 4, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

2. CSS only cool hover effect

See the Pen <a href="https://codepen.io/t_afif/pen/ExQLWNE"> CSS only cool hover effect</a> by Temani Afif (<a href="https://codepen.io/t_afif">@t_afif</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Temani Afif
Source: Code / Demo
Created on: JUNE 1, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

3. Team Profile Hover Effect

See the Pen <a href="https://codepen.io/sparshgupta007/pen/mdWzmxW"> Team Profile Hover Effect</a> by Sparshcodes (<a href="https://codepen.io/sparshgupta007">@sparshgupta007</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Sparshcodes
Source: Code / Demo
Created on: JUNE 11, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

4. About Us Pop-Out Effect

See the Pen <a href="https://codepen.io/ainalem/pen/QWGNzYm"> About Us Pop-Out Effect</a> by Mikael Ainalem (<a href="https://codepen.io/ainalem">@ainalem</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mikael Ainalem
Source: Code / Demo
Created on: FEBRUARY 8, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

5. CSS3 Hover Effects

See the Pen <a href="https://codepen.io/honglio/pen/kWXXvj"> CSS3 Hover Effects</a> by honglio (<a href="https://codepen.io/honglio">@honglio</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: honglio
Source: Code / Demo
Created on: AUGUST 15, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

6. image hover effects pure css

See the Pen <a href="https://codepen.io/falloutgirl/pen/NrrVvz"> image hover effects pure css</a> by fall out girl (<a href="https://codepen.io/falloutgirl">@falloutgirl</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: fall out girl
Source: Code / Demo
Created on: JUNE 17, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

7. Hover rays with masking and Houdini magic

See the Pen <a href="https://codepen.io/thebabydino/pen/YzppPmm"> Hover rays with masking and Houdini magic (Chromium only)</a> by Ana Tudor (<a href="https://codepen.io/thebabydino">@thebabydino</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ana Tudor
Source: Code / Demo
Created on: FEBRUARY 11, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

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

See the Pen <a href="https://codepen.io/noeldelgado/pen/nweYMz"> Direction-aware 3D hover effect (Concept)</a> by Noel Delgado (<a href="https://codepen.io/noeldelgado">@noeldelgado</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Noel Delgado
Source: Code / Demo
Created on: OCTOBER 30, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS(SCSS), JavaScript(Babel)

9. Image Hover Effect

See the Pen <a href="https://codepen.io/ig_design/pen/WNrWezW"> Image Hover Effect – pure css – #18</a> by Ivan Grozdic (<a href="https://codepen.io/ig_design">@ig_design</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ivan Grozdic
Source: Code / Demo
Created on: JULY 25, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

10. Accent Shard (On Hover)

See the Pen <a href="https://codepen.io/Hyperplexed/pen/qBMYVoq"> Accent Shard (On Hover)</a> by Hyperplexed (<a href="https://codepen.io/Hyperplexed">@Hyperplexed</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Hyperplexed
Source: Code / Demo
Created on: MARCH 15, 2023
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

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

See the Pen <a href="https://codepen.io/gsarig/pen/gOwXpRa"> Subtle cross when hovering on a grid’s item corners</a> by Giorgos (<a href="https://codepen.io/gsarig">@gsarig</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Giorgos
Source: Code / Demo
Created on: DECEMBER 24, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

12. More boxes

See the Pen <a href="https://codepen.io/0guzhan/pen/oaOGgv"> 🌟 More boxes 🌟</a> by 0guzhan (<a href="https://codepen.io/0guzhan">@0guzhan</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Oguzhan
Source: Code / Demo
Created on: OCTOBER 29, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS (SCSS)

13. CSS – Every Hover Effects

See the Pen <a href="https://codepen.io/qq7886/pen/yOggRj"> CSS – Every Hover Effects</a> by chenchen (<a href="https://codepen.io/qq7886">@qq7886</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: chenchen
Source: Code / Demo
Created on: MARCH 17, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

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

See the Pen <a href="https://codepen.io/jh3y/pen/mdxggmO"> CSS OS Dock [CSS :has(), lerp custom props]</a> by Jhey (<a href="https://codepen.io/jh3y">@jh3y</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jhey
Source: Code / Demo
Created on: AUGUST 25, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

15. Shape Zoom Transition

See the Pen <a href="https://codepen.io/lonekorean/pen/zYRjwQx"> Shape Zoom Transition</a> by Will Boyd (<a href="https://codepen.io/lonekorean">@lonekorean</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Will Boyd
Source: Code / Demo
Created on: JUNE 1, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

16. Pure CSS Hover Blur

See the Pen <a href="https://codepen.io/russpate/pen/qRaepv"> Pure CSS Hover Blur</a> by Russ Pate (<a href="https://codepen.io/russpate">@russpate</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Russ Pate
Source: Code / Demo
Created on: JANUARY 17, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

17. Perspective Hover Effect

See the Pen <a href="https://codepen.io/maximelafarie/pen/vZadEb"> Perspective hover effect (CSS only)</a> by Maxime Lafarie (<a href="https://codepen.io/maximelafarie">@maximelafarie</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Maxime Lafarie
Source: Code / Demo
Created on: JULY 6, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

18. Inward Shadow Pt. 2

See the Pen <a href="https://codepen.io/smashingmag/pen/abPOwRm"> Inward Shadow Pt. 2</a> by Smashing Magazine (<a href="https://codepen.io/smashingmag">@smashingmag</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Smashing Magazine
Source: Code / Demo
Created on: AUGUST 23, 2023
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

19. CSS only hover effect

See the Pen <a href="https://codepen.io/t_afif/pen/podQMEX"> CSS only hover effect</a> by Temani Afif (<a href="https://codepen.io/t_afif">@t_afif</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Temani Afif
Source: Code / Demo
Created on: MARCH 02, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

20. X-Ray – Pure CSS

See the Pen <a href="https://codepen.io/josetxu/pen/yLqWogR"> X-Ray – Pure CSS</a> by Josetxu (<a href="https://codepen.io/josetxu">@josetxu</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Josetxu
Source: Code / Demo
Created on: FEBRUARY 8, 2023
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

21. Mouse-Out Hover Effect: Final

See the Pen <a href="https://codepen.io/geoffgraham/pen/yLzvXyL"> Mouse-Out Hover Effect: Final</a> by Geoff Graham (<a href="https://codepen.io/geoffgraham">@geoffgraham</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Geoff Graham
Source: Code / Demo
Created on: DECEMBER 30, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

22. Multiple hover’s for one animation

See the Pen <a href="https://codepen.io/silvio-r/pen/NWaKxvp"> Multiple hover’s for one animation</a> by Silvio (<a href="https://codepen.io/silvio-r">@silvio-r</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Silvio
Source: Code / Demo
Created on: NOVEMBER 27, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

23. Lifted Paper Strips (Hover Effect)

See the Pen <a href="https://codepen.io/BastianAndre/pen/eBBvVz"> Lifted Paper Strips (Hover Effect)</a> by Bastian Andre (<a href="https://codepen.io/BastianAndre">@BastianAndre</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Bastian Andre
Source: Code / Demo
Created on: NOVEMBER 17, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(Sass)

24. Cool hover effect

See the Pen <a href="https://codepen.io/t_afif/pen/JjrNroB"> Cool hover effect</a> by Temani Afif (<a href="https://codepen.io/t_afif">@t_afif</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Temani Afif
Source: Code / Demo
Created on: DECEMBER 17, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

25. Image Hover Effects

See the Pen <a href="https://codepen.io/kw7oe/pen/mPeepv"> Image Hover Effects</a> by kw7oe (<a href="https://codepen.io/kw7oe">@kw7oe</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: kw7oe
Source: Code / Demo
Created on: MARCH 4, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

26. Kinetic Magnetic Dot •

See the Pen <a href="https://codepen.io/rauldronca/pen/MZjEBd"> Kinetic Magnetic Dot •</a> by Dronca Raul (<a href="https://codepen.io/rauldronca">@rauldronca</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Dronca Raul
Source: Code / Demo
Created on: DECEMBER 18, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript(Babel)

27. Creative Menu Hover Effects #

See the Pen <a href="https://codepen.io/abdelRhman345/pen/PXMmdv"> Creative Menu Hover Effects #</a> by abdel Rhman (<a href="https://codepen.io/abdelRhman345">@abdelRhman345</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: abdel Rhman
Source: Code / Demo
Created on: JANUARY 19, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

28. Button CSS Hover Effects

See the Pen <a href="https://codepen.io/melaniebmn/pen/VyOOVQ"> Button CSS Hover Effects</a> by Melanie Bockmann (<a href="https://codepen.io/melaniebmn">@melaniebmn</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Melanie Bockmann
Source: Code / Demo
Created on: JANUARY 25, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

29. CSS3 Hover Effect using :after Psuedo Element

See the Pen <a href="https://codepen.io/larrygeams/pen/kPeXNw"> CSS3 Hover Effect using :after Psuedo Element</a> by Larry Geams Parangan (<a href="https://codepen.io/larrygeams">@larrygeams</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Larry Geams Parangan
Source: Code / Demo
Created on: OCTOBER 9, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

30. Rainbow stacked accordion animation

See the Pen <a href="https://codepen.io/fossheim/pen/MWwOBwx"> Rainbow stacked accordion animation</a> by Sarah Fossheim (<a href="https://codepen.io/fossheim">@fossheim</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Sarah Fossheim
Source: Code / Demo
Created on: MARCH 8, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

31. SVG animation + CSS only +hover/focus state styles

See the Pen <a href="https://codepen.io/nanacodesign/pen/YzKgYvQ"> SVG animation + CSS only +hover/focus state styles</a> by nana (<a href="https://codepen.io/nanacodesign">@nanacodesign</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: nana
Source: Code / Demo
Created on: SEPTEMBER 25, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

32. Fullscreen background outline hover effect 60fps

See the Pen <a href="https://codepen.io/brownerd/pen/GRJNXEd"> Fullscreen background outline hover effect 60fps</a> by BROWNERD (<a href="https://codepen.io/brownerd">@brownerd</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: BROWNERD
Source: Code / Demo
Created on: FEBRUARY 23, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug) ,CSS (Stylus)

33. バードなトランスフォームボタン

See the Pen <a href="https://codepen.io/ash_creator/pen/OJEbxZr"> バードなトランスフォームボタン</a> by あしざわ – Webクリエイター (<a href="https://codepen.io/ash_creator">@ash_creator</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: あしざわ – Webクリエイター
Source: Code / Demo
Created on: NOVEMBER 8, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

34. Glowing Icon Hover Effect

See the Pen <a href="https://codepen.io/dig-lopes/pen/WLVGda"> Glowing Icon Hover Effect</a> by Diego Lopes (<a href="https://codepen.io/dig-lopes">@dig-lopes</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Diego Lopes
Source: Code / Demo
Created on: JANUARY 19, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

35. Attract hover effect

See the Pen <a href="https://codepen.io/Mamboleoo/pen/XgBvrJ"> Attract hover effect</a> by Louis Hoebregts (<a href="https://codepen.io/Mamboleoo">@Mamboleoo</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Louis Hoebregts
Source: Code / Demo
Created on: JULY 7, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript(Babel)

36. Profile Card Hover Effect

See the Pen <a href="https://codepen.io/petegarvin1/pen/YzWBbRx"> Profile Card Hover Effect</a> by P (<a href="https://codepen.io/petegarvin1">@petegarvin1</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: P
Source: Code / Demo
Created on: NOVEMBER 15, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Stylus)

37. Hover Animation

See the Pen <a href="https://codepen.io/mattboldt/pen/njwvgB"> Hover Animation</a> by Matt Boldt (<a href="https://codepen.io/mattboldt">@mattboldt</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Matt Boldt
Source: Code / Demo
Created on: JULY 8, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

38. Simple Tile Hover Effect

See the Pen <a href="https://codepen.io/chrisdothtml/pen/OVmgwK"> Simple Tile Hover Effect</a> by Chris Deacy (<a href="https://codepen.io/chrisdothtml">@chrisdothtml</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Chris Deacy
Source: Code / Demo
Created on: JUNE 07, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

39. Gallery Hover Effect

See the Pen <a href="https://codepen.io/bobbykorec/pen/yLgRwRx"> Gallery Hover Effect</a> by Bobby Korec (<a href="https://codepen.io/bobbykorec">@bobbykorec</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Bobby Korec
Source: Code / Demo
Created on: APRIL 21, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

40. CSS Hover Effects

See the Pen <a href="https://codepen.io/RRoberts/pen/zBpNoK"> CSS Hover Effects</a> by Rosa (<a href="https://codepen.io/RRoberts">@RRoberts</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Rosa
Source: Code / Demo
Created on: JULY 15, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

41. Hover Effect: Pop and Background Animate

See the Pen <a href="https://codepen.io/davidleininger/pen/mKrroW"> Hover Effect: Pop and Background Animate</a> by David Leininger (<a href="https://codepen.io/davidleininger">@davidleininger</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: David Leininger
Source: Code / Demo
Created on: JUNE 7, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

42. Tessellations eCommerce

See the Pen <a href="https://codepen.io/andybarefoot/pen/VwZjVma"> Tessellations eCommerce</a> by Andy Barefoot (<a href="https://codepen.io/andybarefoot">@andybarefoot</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Andy Barefoot
Source: Code / Demo
Created on: AUGUST 18, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

43. CSS Nugget: styling siblings on hover

See the Pen <a href="https://codepen.io/codyhouse/pen/KKdrmXj"> CSS Nugget: styling siblings on hover</a> by CodyHouse (<a href="https://codepen.io/codyhouse">@codyhouse</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: CodyHouse
Source: Code / Demo
Created on: MAY 18, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

44. Underline-Animation

See the Pen <a href="https://codepen.io/ssmkhrj/pen/MWjpWKp"> Underline-Animation</a> by Som Shekhar Mukherjee (<a href="https://codepen.io/ssmkhrj">@ssmkhrj</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Som Shekhar Mukherjee
Source: Code / Demo
Created on: DECEMBER 14, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

45. Stripe “Box Shadow”

See the Pen <a href="https://codepen.io/carterfromsl/pen/LYqYRyN"> Stripe “Box Shadow”</a> by Carter Lovelace (<a href="https://codepen.io/carterfromsl">@carterfromsl</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: carterfroms
Source: Code / Demo
Created on: OCTOBER 21, 2023
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

46. Fun with :hover

See the Pen <a href="https://codepen.io/designcouch/pen/OJPYOeY"> Fun with :hover</a> by Jesse Couch (<a href="https://codepen.io/designcouch">@designcouch</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jesse Couch
Source: Code / Demo
Created on: JANUARY 29, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

47. Circular Ripple Hover Effect on Button

See the Pen <a href="https://codepen.io/wifidev/pen/GYGwpv"> Circular Ripple Hover Effect on Button</a> by wifidev (<a href="https://codepen.io/wifidev">@wifidev</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: wifidev
Source: Code / Demo
Created on: OCTOBER 21, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

48. Hover effects overview

See the Pen <a href="https://codepen.io/t_afif/pen/poawLeQ"> Hover effects overview</a> by Temani Afif (<a href="https://codepen.io/t_afif">@t_afif</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Temani Afif
Source: Code / Demo
Created on: MAY 20, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

49. Icons hovering

See the Pen <a href="https://codepen.io/yingyingszeto/pen/bMGxPP"> Icons hovering – #002</a> by Ying Ying Szero (<a href="https://codepen.io/yingyingszeto">@yingyingszeto</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ying Ying Szeto
Source: Code / Demo
Created on: APRIL 18, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

50. Item animation (Hover)

See the Pen <a href="https://codepen.io/wikyware-net/pen/abwVORa"> Item animation (Hover)</a> by Wikyware Net (<a href="https://codepen.io/wikyware-net">@wikyware-net</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Wikyware Net
Source: Code / Demo
Created on: SEPTEMBER 15, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

51. Hamburger CSS Hover Effects

See the Pen <a href="https://codepen.io/IanH/pen/vEYMOz"> Hamburger CSS Hover Effects</a> by Ian Haggerty (<a href="https://codepen.io/IanH">@IanH</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ian Haggerty
Source: Code / Demo
Created on: NOVEMBER 17, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

52. Border Hover Effect

See the Pen <a href="https://codepen.io/dig-lopes/pen/XovjNL"> Border Hover Effect</a> by Diego Lopes (<a href="https://codepen.io/dig-lopes">@dig-lopes</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Diego Lopes
Source: Code / Demo
Created on: JANUARY 19, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

53. Image Hover Effects

Author: miketricking
Source: Code / Demo
Created on: FEBRUARY 10, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

54. Box corners animation

See the Pen <a href="https://codepen.io/Sherpa23/pen/rKvJXg"> Box corners animation</a> by Lukáš Werner (<a href="https://codepen.io/Sherpa23">@Sherpa23</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Lukáš Werner
Source: Code / Demo
Created on: JUNE 22, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

55. Pattern + Background Combo

See the Pen <a href="https://codepen.io/brianbale/pen/KKMOoVy"> Pattern + Background Combo</a> by Brian Bale (<a href="https://codepen.io/brianbale">@brianbale</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Brian Bale
Source: Code / Demo
Created on: NOVEMBER 23, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

56. Dual image with hover effect

See the Pen <a href="https://codepen.io/t_afif/pen/LYdqGKQ"> Dual image with hover effect</a> by Temani Afif (<a href="https://codepen.io/t_afif">@t_afif</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Temani Afif
Source: Code / Demo
Created on: AUGUST 19, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

57. PopCSSicle

See the Pen <a href="https://codepen.io/pgalor/pen/RqwPoe"> PopCSSicle</a> by Piotr Galor (<a href="https://codepen.io/pgalor">@pgalor</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: @pgalor
Source: Code / Demo
Created on: NOVEMBER 3, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

58. 3d image hover effect

See the Pen <a href="https://codepen.io/lookingfordev/pen/WydXrN"> 3d image hover effect</a> by Dev (<a href="https://codepen.io/lookingfordev">@lookingfordev</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Dev
Source: Code / Demo
Created on: June 19, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

59. Image with reflection and proximity effect on hover

See the Pen <a href="https://codepen.io/TiagoLopes/pen/vZBMWB"> Image with reflection and proximity effect on hover</a> by Tiago Alexandre Lopes (<a href="https://codepen.io/TiagoLopes">@TiagoLopes</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Tiago Alexandre Lopes
Source: Code / Demo
Created on: June 2, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

60. Card pseudo-element hover

See the Pen <a href="https://codepen.io/douglasmofet/pen/gOPaory"> Card pseudo-element hover</a> by douglasmofet (<a href="https://codepen.io/douglasmofet">@douglasmofet</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Douglasmofet
Source: Code / Demo
Created on: June 9, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

61. CSS Hover effect

See the Pen <a href="https://codepen.io/Jeremboo/pen/WwbjvL"> _ CSS Hover effect _</a> by Jeremie Boulay (<a href="https://codepen.io/Jeremboo">@Jeremboo</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jeremie Boulay
Source: Code / Demo
Created on: MARCH 01, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Stylus)

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

See the Pen <a href="https://codepen.io/takaneichinose/pen/wvGwXQJ"> CSS Only “hologram” effect Button 3D Icon</a> by Takane Ichinose (<a href="https://codepen.io/takaneichinose">@takaneichinose</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Takane Ichinose
Source: Code / Demo
Created on: AUGUST 4, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug) , CSS (SCSS)

63. Staggered Animations

See the Pen <a href="https://codepen.io/chriscoyier/pen/JgqgjN"> Staggered Animations</a> by Chris Coyier (<a href="https://codepen.io/chriscoyier">@chriscoyier</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Chris Coyier
Source: Code / Demo
Created on: AUGUST 12, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

64. CSS Only Cubes Hover Effects @ OnlineTutorialsYT

See the Pen
CSS Only Cubes Hover Effects @ OnlineTutorialsYT by Greg Vissing (@gvissing)
on CodePen.
lass=”text-body-secondary small fw-semibold”>Author: Greg Vissing
Source: Code / Demo
Created on: JANUARY 26, 2023
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

65. [CPC] Tile hover multi-button

See the Pen <a href="https://codepen.io/z-/pen/WNbMjEW"> [CPC] Tile hover multi-button</a> by Zed Dash (<a href="https://codepen.io/z-">@z-</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Zed Dash
Source: Code / Demo
Created on: JANUARY 8, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS (SCSS)

66. Youtube card

See the Pen <a href="https://codepen.io/VeronQ/pen/MQRrBb"> Youtube card</a> by Quentin Veron (<a href="https://codepen.io/VeronQ">@VeronQ</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Quentin Véron
Source: Code / Demo
Created on: MARCH 3, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug) , CSS (SCSS), JavaScript

67. Piece {css hover fx}

See the Pen <a href="https://codepen.io/ycw/pen/abzEdyz"> piece{css hover fx}</a> by ycw (<a href="https://codepen.io/ycw">@ycw</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ycw
Source: Code / Demo
Created on: JANUARY 5, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS (Less)

68. Radial Gradient Spotlight Effect

See the Pen <a href="https://codepen.io/GeorgePark/pen/ELemzZ"> Radial Gradient Spotlight Effect</a> by George W. Park (<a href="https://codepen.io/GeorgePark">@GeorgePark</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: George W. Park
Source: Code / Demo
Created on: MAY 15, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript(Babel)

69. Underline on hover

See the Pen <a href="https://codepen.io/antoniasymeonidou/pen/LYzKYwW"> Underline on hover</a> by NANOUU (<a href="https://codepen.io/antoniasymeonidou">@antoniasymeonidou</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: NANOUU
Source: Code / Demo
Created on: JANUARY 20, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

70. Glide To Reveal with CSS :has()

See the Pen <a href="https://codepen.io/jh3y/pen/JjxPKXz"> Glide To Reveal with CSS :has()</a> by Jhey (<a href="https://codepen.io/jh3y">@jh3y</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: JHEY
Source: Code / Demo
Created on: OCTOBER 20, 2023
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

71. Cool frame hover effect (CSS Only)

See the Pen <a href="https://codepen.io/t_afif/pen/BarXmGg"> Cool frame hover effect (CSS Only)</a> by Temani Afif (<a href="https://codepen.io/t_afif">@t_afif</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Temani Afif
Source: Code / Demo
Created on: AUGUST 30, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

72. Mapping Mouse Position in CSS

Author: Amit Sheen
Source: Code / Demo
Created on: FEBRUARY 14, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

73. Pure CSS Questionnaire Concept (hover items)

See the Pen <a href="https://codepen.io/suez/pen/XJGOyL"> Pure CSS Questionnaire Concept (hover items)</a> by Nikolay Talanov (<a href="https://codepen.io/suez">@suez</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Nikolay Talanov
Source: Code / Demo
Created on: MARCH 31, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

74. Button Hover Animation

See the Pen <a href="https://codepen.io/bhautikbharadava/pen/OdPzdW"> Button Hover Animation</a> by Bhautik Bharadava (<a href="https://codepen.io/bhautikbharadava">@bhautikbharadava</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Bhautik Bharadava
Source: Code / Demo
Created on: JANUARY 23, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

75. Supa Dupa Fly Hover

See the Pen <a href="https://codepen.io/hexagoncircle/pen/LYNNYyQ"> Supa Dupa Fly Hover</a> by Ryan Mulligan (<a href="https://codepen.io/hexagoncircle">@hexagoncircle</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ryan Mulligan
Source: Code / Demo
Created on: AUGUST 14, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS

76. Let me see what you got!

See the Pen <a href="https://codepen.io/tobiasglaus/pen/wxepwv"> Let me see what you got!</a> by Tobias Glaus (<a href="https://codepen.io/tobiasglaus">@tobiasglaus</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Tobias Glaus
Source: Code / Demo
Created on: JULY 25, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

77. color-mix experiment

See the Pen <a href="https://codepen.io/oliverturner/pen/BaGXwyx"> color-mix experiment</a> by Oliver Turner (<a href="https://codepen.io/oliverturner">@oliverturner</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Oliver Turner
Source: Code / Demo
Created on: AUGUST 14, 2023
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

78. Box with magic zoom effect

See the Pen <a href="https://codepen.io/yancy/pen/LBbvQZ"> Box with magic zoom effect</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: JULY 20, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

79. CSS-only direction-aware hover effect

See the Pen <a href="https://codepen.io/pehaa/pen/yLNJowX"> CSS-only direction-aware hover effect</a> by Paulina Hetman (<a href="https://codepen.io/pehaa">@pehaa</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Paulina Hetman
Source: Code / Demo
Created on: FEBRUARY 18, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

80. CSS mouse-out transition effect

See the Pen <a href="https://codepen.io/argyleink/pen/poEjvpd"> CSS mouse-out transition effect</a> by Adam Argyle (<a href="https://codepen.io/argyleink">@argyleink</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Adam Argyle
Source: Code / Demo
Created on: DECEMBER 1, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

81. CSS-only Fade Siblings on Hover

See the Pen <a href="https://codepen.io/shshaw/pen/wWQeEB"> CSS-only Fade Siblings on Hover</a> by Shaw (<a href="https://codepen.io/shshaw">@shshaw</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Shaw
Source: Code / Demo
Created on: AUGUST 8, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

82. Hover For Product Info

See the Pen <a href="https://codepen.io/SRHubli/pen/BqQBWO"> Hover For Product Info</a> by Siddharth Hubli (<a href="https://codepen.io/SRHubli">@SRHubli</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Siddharth Hubli
Source: Code / Demo
Created on: OCTOBER 7, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

83. Art is pointless

See the Pen <a href="https://codepen.io/sirnightowl/pen/XWbZjZN"> Art is pointless</a> by Martin Whitaker (<a href="https://codepen.io/sirnightowl">@sirnightowl</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Martin Whitaker
Source: Code / Demo
Created on: MARCH 11, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS),JavaScript

84. Full CSS growing dot effect

See the Pen <a href="https://codepen.io/onediv/pen/zYEZXdz"> Full CSS growing dot effect</a> by Vincent Durand (<a href="https://codepen.io/onediv">@onediv</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Vincent Durand
Source: Code / Demo
Created on: DECEMBER 16, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS (SCSS)

85. Circular reveal hover effect

See the Pen <a href="https://codepen.io/t_afif/pen/wvNbXrE"> Circular reveal hover effect</a> by Temani Afif (<a href="https://codepen.io/t_afif">@t_afif</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Temani Afif
Source: Code / Demo
Created on: DECEMBER 14, 2023
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

86. Futuristic 3D Hover Effect

See the Pen <a href="https://codepen.io/jouanmarcel/pen/NLgVjm"> Futuristic 3D Hover Effect 🛸</a> by Jouan Marcel (<a href="https://codepen.io/jouanmarcel">@jouanmarcel</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jouan Marcel
Source: Code / Demo
Created on: SEPTEMBER 5, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

87. Glitch Effect on Hover

See the Pen <a href="https://codepen.io/iamryanyu/pen/bvwapv"> Glitch Effect on Hover</a> by Ryan Yu (<a href="https://codepen.io/iamryanyu">@iamryanyu</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ryan Yu
Source: Code / Demo
Created on: MARCH 17, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

88. Fluent Design: Rebuild

See the Pen <a href="https://codepen.io/internette/pen/qogvJv"> Fluent Design: Rebuild</a> by Antoinette Janus (<a href="https://codepen.io/internette">@internette</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Antoinette Janus
Source: Code / Demo
Created on: APRIL 10, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML (Pug) ,CSS (SCSS)

89. connections{css hover fx}

See the Pen <a href="https://codepen.io/ycw/pen/yLypKKP"> connections{css hover fx}</a> by ycw (<a href="https://codepen.io/ycw">@ycw</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ycw
Source: Code / Demo
Created on: JANUARY 6, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS (Less)

90. Hover effect (CSS)

See the Pen <a href="https://codepen.io/amit_sheen/pen/NWpLKPy"> Hover effect (CSS)</a> by Amit Sheen (<a href="https://codepen.io/amit_sheen">@amit_sheen</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Amit Sheen
Source: Code / Demo
Created on: June 9, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

91. Image gift box (hover to reveal)

See the Pen <a href="https://codepen.io/t_afif/pen/LYaPPPo"> Image gift box (hover to reveal)</a> by Temani Afif (<a href="https://codepen.io/t_afif">@t_afif</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Temani Afif
Source: Code / Demo
Created on: DECEMBER 19, 2023
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

92. All-but-me query with :has()

See the Pen <a href="https://codepen.io/seyedi/pen/RwdrMYw"> All-but-me query with :has()</a> by Mojtaba Seyedi (<a href="https://codepen.io/seyedi">@seyedi</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mojtaba Seyedi
Source: Code / Demo
Created on: JANUARY 4, 2024
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

93. Frame hover effect with one element

See the Pen <a href="https://codepen.io/t_afif/pen/JjLVLPL"> Frame hover effect with one element</a> by Temani Afif (<a href="https://codepen.io/t_afif">@t_afif</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Temani Afif
Source: Code / Demo
Created on: AUGUST 24, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

94. Exploding Box Hover

See the Pen <a href="https://codepen.io/zastrow/pen/LYdNPOE"> Exploding Box Hover</a> by Philip Zastrow (<a href="https://codepen.io/zastrow">@zastrow</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Philip Zastrow
Source: Code / Demo
Created on: JULY 7, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

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

See the Pen <a href="https://codepen.io/rgg/pen/dPQmZa"> Pure CSS 3D perspective render + :hover anim</a> by Rafael González (<a href="https://codepen.io/rgg">@rgg</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Rafael González
Source: Code / Demo
Created on: MARCH 17, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

96. Pure CSS Circle Hover Affect

See the Pen <a href="https://codepen.io/budachb/pen/MPPbqv"> Pure CSS Circle Hover Affect</a> by Bradley Budach (<a href="https://codepen.io/budachb">@budachb</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Bradley Budach
Source: Code / Demo
Created on: OCTOBER 24, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

97. Buttons

See the Pen <a href="https://codepen.io/elitsa_dimitrova/pen/JNmaZV"> Buttons</a> by Elitsa Dimitrova (<a href="https://codepen.io/elitsa_dimitrova">@elitsa_dimitrova</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Elitsa Dimitrova
Source: Code / Demo
Created on: MAY 19, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

98. Card Hover Info Interaction

See the Pen <a href="https://codepen.io/dev_loop/pen/gOPPpeL"> Card Hover Info Interaction | Best in Chrome</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: June 10, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

99. Horizontal Wipe Transition

See the Pen <a href="https://codepen.io/lonekorean/pen/NWyMjmL"> Horizontal Wipe Transition</a> by Will Boyd (<a href="https://codepen.io/lonekorean">@lonekorean</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Will Boyd
Source: Code / Demo
Created on: June 1, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

100. Animation hover effect

See the Pen <a href="https://codepen.io/ibanez182/pen/rOmYKq"> Animation hover effect</a> by Nicola Pressi (<a href="https://codepen.io/ibanez182">@ibanez182</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Nicola Press
Source: Code / Demo
Created on: OCTOBER 6, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS(SCSS)

101.SVG clip-path Hover Effect

See the Pen <a href="https://codepen.io/noeldelgado/pen/PZJGLx"> SVG clip-path Hover Effect</a> by Noel Delgado (<a href="https://codepen.io/noeldelgado">@noeldelgado</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Noel Delgado
Source: Code / Demo
Created on: JANUARY 15, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS(SCSS)

102. Stacked Cards Hover Effects

See the Pen <a href="https://codepen.io/kjbrum/pen/GWdeJX"> Stacked Cards Hover Effects</a> by Kyle Brumm (<a href="https://codepen.io/kjbrum">@kjbrum</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Kyle Brumm
Source: Code / Demo
Created on: MARCH 23, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

103. CSS-only underline hover effect

See the Pen <a href="https://codepen.io/t_afif/pen/bGQOaEb"> CSS-only underline hover effect</a> by Temani Afif (<a href="https://codepen.io/t_afif">@t_afif</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Temani Afif
Source: Code / Demo
Created on: AUGUST 1, 2023
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

104. Clip Path Hover Animation – Keyboard accessible

See the Pen <a href="https://codepen.io/vladracoare/pen/RwPrayL"> Clip Path Hover Animation – Keyboard accessible</a> by Vlad Racoare (<a href="https://codepen.io/vladracoare">@vladracoare</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Vlad Racoare
Source: Code / Demo
Created on: FEBRUARY 13, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

105. Fancy slide-in hover | CSS only

See the Pen <a href="https://codepen.io/havardob/pen/gOamzGq"> Fancy slide-in hover | CSS only </a> by Håvard Brynjulfsen (<a href="https://codepen.io/havardob">@havardob</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Håvard Brynjulfsen
Source: Code / Demo
Created on: APRIL 25, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

106. 10 Stylish Hover Effects With LESS

See the Pen <a href="https://codepen.io/caraujo/pen/VYOjNM"> 10 stylish hover effects with less</a> by Renan C. Araujo (<a href="https://codepen.io/caraujo">@caraujo</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Renan C. Araujo
Source: Code / Demo
Created on: OCTOBER 13, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Less)

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

See the Pen <a href="https://codepen.io/thebabydino/pen/yLameyV"> Cross-browser no image duplication reveal effect with real img elments</a> by Ana Tudor (<a href="https://codepen.io/thebabydino">@thebabydino</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ana Tudor
Source: Code / Demo
Created on: JANUARY 26, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS (SCSS)

108. CSS Motion Blur

See the Pen <a href="https://codepen.io/dalailahner/pen/JjKGOpg"> CSS Motion Blur</a> by dalailahner (<a href="https://codepen.io/dalailahner">@dalailahner</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: dalailahner
Source: Code / Demo
Created on: OCTOBER 15, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

109. Animated Border

See the Pen <a href="https://codepen.io/Christaelrod/pen/OJPxKXv"> Animated Border</a> by Christaelrod (<a href="https://codepen.io/Christaelrod">@Christaelrod</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Christaelrod
Source: Code / Demo
Created on: JANUARY 2, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

110. Cool hover animation

See the Pen <a href="https://codepen.io/tonifuzi/pen/gLyKJV"> Cool hover animation</a> by Tonifuzi (<a href="https://codepen.io/tonifuzi">@tonifuzi</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Tonifuzi
Source: Code / Demo
Created on: DECEMBER 23, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

111. 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)

112. Refer Friends Hover Animation

See the Pen <a href="https://codepen.io/TurkAysenur/pen/NWqMqYP"> Refer Friends Hover Animation</a> by Aysenur Turk (<a href="https://codepen.io/TurkAysenur">@TurkAysenur</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Aysenur Turk
Source: Code / Demo
Created on: MARCH 15, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

113. Animated Box with Hover Effects

See the Pen <a href="https://codepen.io/avithour/pen/xzNJaV"> Animated Box with Hover Effects</a> by Avi Thour (<a href="https://codepen.io/avithour">@avithour</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Avi Thour
Source: Code / Demo
Created on: JULY 5, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

114. Transforming Edges- smooth and sharp

See the Pen <a href="https://codepen.io/meowwwls/pen/eYYgPEr"> Transforming Edges – #CodePenChallenge: smooth and sharp</a> by Melissa Em (<a href="https://codepen.io/meowwwls">@meowwwls</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Melissa Em
Source: Code / Demo
Created on: OCTOBER 22, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

115. CSS only Border hover effect

See the Pen <a href="https://codepen.io/t_afif/pen/eYeqvMe"> CSS only Border hover effect</a> by Temani Afif (<a href="https://codepen.io/t_afif">@t_afif</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Temani Afif
Source: Code / Demo
Created on: MARCH 10, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

116. Text hover effects

See the Pen <a href="https://codepen.io/MatteoDevBN1/pen/eZZYdY"> Text hover effects</a> by Matteo (<a href="https://codepen.io/MatteoDevBN1">@MatteoDevBN1</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Matteo
Source: Code / Demo
Created on: MARCH 8, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

117. CSS 3D Hover

See the Pen <a href="https://codepen.io/akhil_001/pen/zoQdaO"> World Places (CSS 3d hover)</a> by Akhil Sai Ram (<a href="https://codepen.io/akhil_001">@akhil_001</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Akhil Sai Ram
Source: Code / Demo
Created on: DECEMBER 24, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

118. Iris Wipe Transition

See the Pen <a href="https://codepen.io/lonekorean/pen/yLvjbrr"> Iris Wipe Transition</a> by Will Boyd (<a href="https://codepen.io/lonekorean">@lonekorean</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Will Boyd
Source: Code / Demo
Created on: June 1, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

119. Zig-zag border & cool hover effect

See the Pen <a href="https://codepen.io/t_afif/pen/BarmdPB"> Zig-zag border & cool hover effect</a> by Temani Afif (<a href="https://codepen.io/t_afif">@t_afif</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Temani Afif
Source: Code / Demo
Created on: JULY 29, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

120. Yin & yang cats

See the Pen <a href="https://codepen.io/ainalem/pen/VwbyjLQ"> Yin & yang cats</a> by Mikael Ainalem (<a href="https://codepen.io/ainalem">@ainalem</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mikael Ainalem
Source: Code / Demo
Created on: JULY 25, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

121. Pure CSS Box Hover with Background Effect

See the Pen <a href="https://codepen.io/Paul2512C/pen/JxKvpb"> Pure CSS Box Hover with Background Effect</a> by Paul (<a href="https://codepen.io/Paul2512C">@Paul2512C</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Paul
Source: Code / Demo
Created on: JANUARY 29, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

122. skewed rectangle highlight

See the Pen <a href="https://codepen.io/vii120/pen/rNqgyxJ"> skewed rectangle highlight</a> by Vivi T. (<a href="https://codepen.io/vii120">@vii120</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Vivi Tseng
Source: Code / Demo
Created on: MAY 30, 2023
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

123. Hover Effect Like Super Team Deluxe

See the Pen <a href="https://codepen.io/fitri/pen/oPMKNv"> Hover Effect Like Super Team Deluxe</a> by Fitri Ali (<a href="https://codepen.io/fitri">@fitri</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Fitri Ali
Source: Code / Demo
Created on: SEPTEMBER 15, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

124. Hover and Scale Blocks UI Concept

See the Pen <a href="https://codepen.io/emilygoldfein/pen/WjZRpe"> Hover and Scale Blocks UI Concept – CSS Only!</a> by Emily Goldfein (<a href="https://codepen.io/emilygoldfein">@emilygoldfein</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Emily Goldfein
Source: Code / Demo
Created on: MAY 5, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

125. Hover Panels POC

See the Pen <a href="https://codepen.io/jh3y/pen/KKWJWbp"> Hover Panels POC</a> by Jhey (<a href="https://codepen.io/jh3y">@jh3y</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jhey
Source: Code / Demo
Created on: JUNE 16, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug) , CSS (Stylus)

126. Scotch VHS CSS

See the Pen <a href="https://codepen.io/BlurSoulx/pen/zYXJqMy"> Scotch VHS CSS</a> by BlurSoulx (<a href="https://codepen.io/BlurSoulx">@BlurSoulx</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: BlurSoulx
Source: Code / Demo
Created on: APRIL 16, 2024
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS