# Sliding Background Effect on Link Hover **URL:** \ **Category:** programming\ **Created:** [November 23, 2014, 3:32am UTC](https://forum.kirupa.com/t/sliding-background-effect-on-link-hover/352273 "2014-11-23T03:32:21Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [November 23, 2014, 3:32am UTC](https://forum.kirupa.com/t/sliding-background-effect-on-link-hover/352273/1 "2014-11-23T03:32:22Z")
by [kirupa](http://www.kirupa.com/me/index.htm) | 10 May 2013 A link's hover state is very similar to cardboard boxes. The fun things you can do with them are endless. One fun thing that you will learn about in this article is how to have a background color slide into view when you are hovering over a link. * * * This is a companion discussion topic for the original entry at [http://www.kirupa.com/html5/sliding\_background\_effect\_on\_link\_hover.htm](http://www.kirupa.com/html5/sliding_background_effect_on_link_hover.htm) ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [September 18, 2019, 9:12pm UTC](https://forum.kirupa.com/t/sliding-background-effect-on-link-hover/352273/2 "2019-09-18T21:12:53Z")
After a bunch of feedback over the years, this article has now been largely rewritten to (hopefully) be better 😛 One thing that some of you may notice in Chrome is that our gradient trick often leaves behind some evidence of the trickery: ![image](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/a/ae2a190593469acf0487d3ce6dde5f0812d5f159.png) Notice the thin black line appearing to the right of George Costanza, for example. That is the result of our black background not fully having disappeared from view. This is caused by how Chrome processes gradient stops, and there is a 🐛 that hasn’t been fixed in quite some time. Latest attempted fix: [https://bugs.chromium.org/p/chromium/issues/detail?id=233879](https://bugs.chromium.org/p/chromium/issues/detail?id=233879) I’ll file a bug on this at some point in the near future if I can repro it on another machine as well. Thanks, Kirupa ---
**Author:** ![nosplashurinal](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/nosplashurinal/32/10066_2.png) [@nosplashurinal](https://forum.kirupa.com/u/nosplashurinal)\ **Post date:** [September 20, 2019, 11:04am UTC](https://forum.kirupa.com/t/sliding-background-effect-on-link-hover/352273/3 "2019-09-20T11:04:38Z")
You said something about the background repeat being relevant but didn’t talk about it later? ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [September 20, 2019, 4:58pm UTC](https://forum.kirupa.com/t/sliding-background-effect-on-link-hover/352273/4 "2019-09-20T16:58:07Z")
Good catch, @nosplashurinal ! The background-repeat is important because when we are adjusting the background-position, we are moving in a direction the original background wouldn’t appear on unless the background repeated. I’ll go back and make an update on that shortly. 😃 ---
**Author:** ![REB\_412](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/reb_412/32/9233_2.png) [@REB\_412](https://forum.kirupa.com/u/REB_412)\ **Post date:** [September 20, 2019, 11:24pm UTC](https://forum.kirupa.com/t/sliding-background-effect-on-link-hover/352273/5 "2019-09-20T23:24:04Z")
I am using Chrome on a Windows 10 Pro machine and I see that effect for the first one, nothing on the second and third and just a hint of it on the last one, if that is any help to you. The three screen shots below show what I am seeing. ![screen_1](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/3/36f7eeea49929807584054fde62d69461dfadc36.png) ![screen_2](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/4/4159afa82fe10c41d334119692f76d35eba29867.png) ![screen_3](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/8/81e6b6c805bba837a363839aaff778b40637e949.png) ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [September 21, 2019, 2:46pm UTC](https://forum.kirupa.com/t/sliding-background-effect-on-link-hover/352273/6 "2019-09-21T14:46:42Z")
Is this happening on the examples in the tutorial as well? Or is it just in your local version? If it is your local version, can you share your HTML file? Thanks, Kirupa 😀 ---
**Author:** ![REB\_412](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/reb_412/32/9233_2.png) [@REB\_412](https://forum.kirupa.com/u/REB_412)\ **Post date:** [September 21, 2019, 3:13pm UTC](https://forum.kirupa.com/t/sliding-background-effect-on-link-hover/352273/7 "2019-09-21T15:13:51Z")
This was what I saw while viewing your tutorial from you site in the latest version of Chrome on a Windows Pro machine. I had not saved a version to my machine. BTW, I do not see this effect in the latest editions of Firefox or Firefox Developer edition but I do see in the latest version of the Opera browser (which is not surprising) ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [September 22, 2019, 8:02pm UTC](https://forum.kirupa.com/t/sliding-background-effect-on-link-hover/352273/8 "2019-09-22T20:02:05Z")
That is strange, for I tried on a Windows machine and I am unable to repro this problem: I wonder if there is a bug in the underlying Chromium components that kicks in on some hardware but not others. I’ll keep fiddling with this in the meantime 🗃 ---
**Author:** ![REB\_412](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/reb_412/32/9233_2.png) [@REB\_412](https://forum.kirupa.com/u/REB_412)\ **Post date:** [September 22, 2019, 8:27pm UTC](https://forum.kirupa.com/t/sliding-background-effect-on-link-hover/352273/9 "2019-09-22T20:27:46Z")
My Chrome was just updated to Version 77.0.3865.90 (Official Build) (64-bit) and I still see what I’ve reported in it.