Sliding Background Effect on Link Hover

programming
1

by kirupa | 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
2

After a bunch of feedback over the years, this article has now been largely rewritten to (hopefully) be better :stuck_out_tongue:

One thing that some of you may notice in Chrome is that our gradient trick often leaves behind some evidence of the trickery:

image

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 :bug: that hasn’t been fixed in quite some time. Latest attempted fix: 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

3

You said something about the background repeat being relevant but didn’t talk about it later?

4

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.

:smiley:

5

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 screen_2 screen_3

1 Like
6

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 :grinning:

7

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)

8

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 :card_file_box:

9

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.