CSS Highlight on Hover Animation

highlight-hover

I saw this great little highlight hover animation on Web Designer Depot the other day and I wondered how it worked. Turns out it's just a few lines of CSS along with some background-position and gradient tricks.

Check the video for a quick explanation on how it works. Enjoy!

[codepen_embed height="268" theme_id="5332" slug_hash="yepexZ" default_tab="result" user="wesbos"]See the Pen yepexZ by Wes Bos (@wesbos) on CodePen.[/codepen_embed]

https://www.youtube.com/watch?v=qii-5ZpLLYY

Find an issue with this post? Think you could clarify, update or add something?

All my posts are available to edit on Github. Any fix, little or small, is appreciated!

Edit on Github

Syntax Podcast

Hold on — I'm grabbin' the last one.

Listen Now →

@wesbos Instant Grams

One sec, getting the gramz...

Beginner JavaScript

Beginner JavaScript

A fun, exercise heavy approach to learning Modern JavaScript from scratch. This is a course for absolute beginners or anyone looking to brush up on their fundamentals. Start here if you are new to JS or programming in general!

BeginnerJavaScript.com
I post videos on and code on

Wes Bos © 1999 — 2020