I just launched a new course on ES6! Use the code WESBOS for $10 off.

Strengthen your core JavaScript skills and master all that ES6 has to offer. Start Now →

CSS Highlight on Hover Animation


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!

See the Pen yepexZ by Wes Bos (@wesbos) on CodePen.5332

This entry was posted in CSS, HTML5. Bookmark the permalink.

20 Responses to CSS Highlight on Hover Animation

  1. Tim Campbell says:

    This was an awesome tutorial!

  2. I love that! And only with CSS – that’s brilliant.

  3. Shrinivas says:

    So cool hover effect. Thanks for sharing.

  4. Rene says:

    Thanks dude, this was awesome.

  5. Impressive trick, Thanks for share.

  6. Eoin says:

    Awesome. Where’s the link to the code pen?

  7. Very nice effect!

    To get rid of the “trapping” at the edges (e.g. in case pixel values are rounded) use these values:

    background-position: 1%;
    background-size: 204%;
    &:hover {
    background-position: -97.5%;

  8. Srinivasan Ponnuswamy says:

    Very immpressive. Thanks for sharing

  9. dago says:

    Nice 🙂

  10. Marcy Sutton says:

    I think you can make it work on focus, too! Don’t forget keyboard users!

  11. ankit says:

    I HAVE Question…
    what i upload this content in my websites..is this legal..or any copywrite law will follow ?? tell me please in details related to this …thnx

  12. Paweł says:

    great stuff, thanks man…

  13. Denis says:

    Didn’t know gradient fill inline elements this way.
    Thank you!

  14. Andressa says:

    so nice! thanks for sharing 🙂 do you know if it’s possible to make it work also when “box-decoration-break: clone” is present?

  15. Ryan says:

    Is there a way to adjust the height of the highlighted area?


  16. Abhijit Das says:

    wow neat tricks. Thank you.

Leave a Reply

Your email address will not be published. Required fields are marked *