1

There are some buttons on this page (the small icons toward the bottom) that I am using some css transitions to change the background of. But there is a flicker the first time the icons are hovered over! I've tried to implement the suggestions offered on this thread, but to no avail. Has anyone an idea on how I can make this work without the flicker?

Thank you so much!

Community
  • 1
  • 1
1252748
  • 14,597
  • 32
  • 109
  • 229

2 Answers2

3

Since no minimal testcase provided, I can suppose your images need to be preloaded, and transitions has nothing to do with the issue.

A background image can be preloaded by specifying it as background for normal (not hover) state of an element, and adding background-position with negative value so that background image is not visible in normal state.

For example:

/* Image is supposed to have height less than 100px here. */
A {
    background: url(example.png) 0 -100px no-repeat;
}

A:hover {
    background-position: 0 0;
}

By the way, it's established practice to put images for both states (normal and hover) to one physical image file, and then just change background-position on hovering:

/* "rollover-sprite.png" file contains images for both states side by side. */
A {
    background: url(rollover-sprite.png) no-repeat;
}

/* Width of image for each state is supposed to be 100px here
  (sprite will be ~200px wide). */
A:hover {
    background-position: -100px 0;
}
Marat Tanalin
  • 13,927
  • 1
  • 36
  • 52
  • Yep, you can see the image download request in the 1st mouseover of each button. – Alex K. Oct 22 '12 at 16:26
  • So I would do like, `background: url../images/mail_button_hover.png) 0 -100px no-repeat; background:url(../images/mail_button.png) no-repeat 0px 0px;` as a way to get the image pre-loaded?...that seems not to work.. I must be doing something wrong. – 1252748 Oct 22 '12 at 16:35
  • No, the idea is that element in normal state should have _same_ background-image as hover state sothat browser wouldn't need to download hover-image when hover itself happens. If your link has a different background image already, you can either use multiple background-images (IE9+) or add nested `SPAN` element with `display: block` for that purpose. – Marat Tanalin Oct 22 '12 at 16:39
0

You need to preload the image that you are switching to, the "flicker" is the short delay between you hovering and the image actually loading. There are lots of ways to do this, are you using jQuery?

Crin
  • 60
  • 5
  • Argh, just beaten to it by Marat, that solution should work but there are heaps of ways of preloading images. Good luck! – Crin Oct 22 '12 at 16:33