125+ CSS Hover Effects

Are you looking for captivating hover effects that make your web page more interactive and engaging? Fret not! Your search ends here! In this collection, we are featuring 125+ HTML and CSS hover effect code examples that enhance the look and feel of your websites. We’ve gathered these hover effects from GitHub, Codepen, and other reliable sites, creating intuitive navigation and drawing attention to specific elements in a visually stunning manner.

We have a diverse range of free hover effects that give you never-ending customisation options to make the site feel more dynamic and polished. From simple hover effects to unique animated effects, these modern hover animation examples will enhance the usability and design aesthetics of any site. Whether you’re looking to add these items to a portfolio site, a blog website, an eCommerce site, or a web application, these stylish and mesmerising hover effects ensure focus, clarity, minimalism, user engagement, and user friendliness.

Check out this hand-picked collection of stunning CSS hover effect snippets! Elevate your web design with smooth animations, interactive buttons, and engaging visual feedback.

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