css: avoid image hover first time blinking

Question

I have an anchor that changes its background image when hovered with a class class-btn that contains a background-image.

When hovered, it has

a.class-btn:hover
{
    background-image('path/to/image-hovered.jpg');
}

When the page loads the first time and you hover this button the first time, it blinks (it takes about half a second to download the hovered image). How to avoid that blinking without JavaScript (only simple css and html is allowed)?

I tried to search Stack Overflow for the similar question, but with no luck.

Just added:

Should I "preload" the hovered image? How?
Should I play with z-index or opacity?

It happens with all browsers and thus the solution should work for all browsers.

Boschman · Accepted Answer · 2021-12-13 20:01:30Z

95

Here is a simple and effective css image preloading technique I have used several times. You can load several images by placing content: url() url() url()... etc.

body:after {
 display: none;
 content: url('path/to/image-hovered.jpg') url('path/to/another-image-hovered.jpg');
}

edited Dec 13, 2021 at 20:01

Boschman

8711 gold badge10 silver badges20 bronze badges

answered Jul 6, 2015 at 8:11

Kristian Svensson

1,1229 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Aaron Franke Over a year ago

This wasn't working for me at first, but I realize now that for some reason the element you apply these styles to MUST be body:after!

Toniq Over a year ago

@Aaron Franke this works for me on any element:after

Bence Szalai Over a year ago

Looks like this does not work any more. My guess is that browsers optimize page loads in a way that the background for hidden elements is not loaded. Tried in recent Firefox, Safari and Chrome versions, none seem to load the image when display: none; is in the declaration. Same results when I try with width: 0; height: 0. If it is visible, it works, however adds unwanted image to the page. Anyone else facing the same?

ladiesman1792 Over a year ago

@Grapestain same with me. Not working when there's display: none;

taylor michels Over a year ago

this solution seems to work in modern browsers stackoverflow.com/a/14390213/1108467

|

CherryFlavourPez · Accepted Answer · 2012-11-08 10:06:33Z

62

The easiest way to avoid this is to make use of image sprites. For a good overview, check out this CSS Tricks article.

That way, you not only solve the flicker problem you're seeing, but will also reduce the number of HTTP requests. Your CSS will look something like:

a.class-btn { background: url('path/to/image.jpg') 0 0 no-repeat; }
a.class-btn:hover { background-position: 0 -40px; }

The specifics will depend on your images. You can also make use of an online sprite generator to make the process easier.

answered Nov 8, 2012 at 10:06

CherryFlavourPez

7,5546 gold badges48 silver badges48 bronze badges

3 Comments

Bugs Bunny Over a year ago

What if I'm using background-size: contain? Any ideas?

anthonygore Over a year ago

Would this work if you wanted to use transition to fade between the images? I'm thinking not..

Jānis Elmeris Over a year ago

I wouldn't call this the easiest solution to fix flickering if the CSS is already otherwise ready. But it is a good way nonetheless.

Callam · Accepted Answer · 2015-03-12 15:45:04Z

15

A simple trick I use is to double up the original background image making sure to put the hovered image first

.next {
  background: url(../images/next-hover.png) center center no-repeat;
  background: url(../images/next.png) center center no-repeat;
    &:hover{
      background: url(../images/next-hover.png) center center no-repeat;
    }
 }

No performance hit and very simple

Or if you're not using SCSS yet:

.next {
  background: url(../images/next-hover.png) center center no-repeat;
  background: url(../images/next.png) center center no-repeat;        
 }
 .next:hover{
  background: url(../images/next-hover.png) center center no-repeat;
 }

edited Mar 12, 2015 at 15:45

answered Mar 20, 2014 at 12:30

Callam

1,0191 gold badge15 silver badges24 bronze badges

2 Comments

Srneczek Over a year ago

if I was developing browser Id load only the valid background (so the last one) to minimize the network load. I think you can expect this is not gonna work in any browser sooner or later.

MightyPork Over a year ago

this worked OK until a recent chrome update, now it's optimized by the browser (which is great, but breaks the preload)

Benjamin Dordoigne · Accepted Answer · 2015-09-24 08:34:13Z

9

If you do this:

#the-button {
background-image: url('images/img.gif');
}
#the-button:before {
  content: url('images/animated-img.gif');
  width:0;
  height:0;
  visibility:hidden;
}

#the-button:hover {
  background-image: url('images/animated-img.gif');
}

This will really help!

See here:

http://particle-in-a-box.com/blog-post/pre-load-hover-images-css-only

P.S - not my work but a solution I found :)

answered Sep 24, 2015 at 8:34

Benjamin Dordoigne

991 silver badge2 bronze badges

3 Comments

Srneczek Over a year ago

Kinda hacky, but it works. I would add position: absolute; or much better display: none; instead of visibility: hidden; if you don't want to mess your layout.

anthonygore Over a year ago

Doesn't work if you actually want to use the pseudo element for something

Stiig Over a year ago

@Srneczek display: none prevents image uploading, just add position: absolute

hdscp · Accepted Answer · 2016-08-26 07:55:00Z

3

@Kristian's method of applying hidden 'content: url()' after the body didn't seem to work in Firefox 48.0 (OS X).

However, changing "display: none;" to something like:

body:after {
 position: absolute; overflow: hidden; left: -50000px;
 content: url(/path/to/picture-1.jpg) url(/path/to/picture-2.jpg);
}

... did the trick for me. Perhaps Firefox won't load hidden images, or maybe it's related to rendering(?).

answered Aug 26, 2016 at 7:55

hdscp

312 bronze badges

1 Comment

bilbohhh Over a year ago

Nice! I would suggest to use position:absolute; width:0; height:0; overflow:hidden; z-index:-1; though. Somehow left: -50000px freaks me out) Basically, the problem is the same as described here: stackoverflow.com/a/14390213/4810382

Anshuman Jasrotia · Accepted Answer · 2012-11-08 10:07:54Z

2

You can preload images

function preloadImages(srcs, imgs, callback) {
var img;
var remaining = srcs.length;
for (var i = 0; i < srcs.length; i++) {
    img = new Image();
    img.onload = function() {
        --remaining;
        if (remaining <= 0) {
            callback();
        }
    };
    img.src = srcs[i];
    imgs.push(img);
}
}
// then to call it, you would use this
var imageSrcs = ["src1", "src2", "src3", "src4"];
var images = [];
preloadImages(imageSrcs, images, myFunction);

answered Nov 8, 2012 at 10:07

Anshuman Jasrotia

3,2038 gold badges52 silver badges82 bronze badges

Comments

Martin Staufcik · Accepted Answer · 2016-04-29 11:36:00Z

2

This is a non-CSS solution: if the hover images are in one directory and have a common naming convention, for example contain a substring '-on.', it is possible to select the file names and put it into the HTML as a series of:

<img src='...' style='display: none' />

answered Apr 29, 2016 at 11:36

Martin Staufcik

9,6728 gold badges57 silver badges77 bronze badges

Comments

John Mark · Accepted Answer · 2023-04-10 06:16:06Z

1

For me this worked a.class-btn{transition-delay: 0.1s;}

answered Apr 10, 2023 at 6:16

John Mark

659 bronze badges

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

asc99c · Accepted Answer · 2012-11-08 10:07:48Z

0

If they are the same dimensions, one possibility is to draw the two images directly on top of each other, with the CSS :hover class for the top image having display: none;

This way both images will be preloaded, but hovering will make the second visible.

answered Nov 8, 2012 at 10:07

asc99c

3,9154 gold badges34 silver badges58 bronze badges

Comments

Nailgun · Accepted Answer · 2015-02-11 14:53:12Z

0

The "double up the original background image" trick didn't work for me so I used another css trick:

.next {
    background: url(../images/next.png) center center no-repeat;        
}
.next:hover {
    background: url(../images/next-hover.png) center center no-repeat;
}
.next:after {
    content: url(../images/next-hover.png);
    display: none;
}

answered Feb 11, 2015 at 14:53

Nailgun

4,1894 gold badges35 silver badges47 bronze badges

Comments

Colin James Firth · Accepted Answer · 2019-08-22 15:56:24Z

This technique works nicely for me and ensures not only is the hover image pre-loaded, but it's also ready and waiting to be displayed. (Most other solutions rely on switching the background image on hover, which just seems to take the browser a bit of time to figure out, however much the image is pre-loaded.)

Create :before and :after pseudo elements on the container with the two images, but hide the one you want to see on hover. Then, on hover, switch the visibility.

So long as they both share the same size and positioning rules, you should see a neat swap.

.image-container {
    &:before { display: block; background-image: url(uncovered.png); }
    &:after { display: none; background-image: url(uncovered.png); }
}
.image-container:hover {
    &:before { display: none; }
    &:after { display: block; }
}

phoenixstudio · Accepted Answer · 2021-01-24 23:21:17Z

0

I had the same issue. After trying everything related with css i can not solve the problem. What finally solved the problem was simulating that someone hovers the element. The css is the normal one.

CSS

#elemName{
 /* ... */
} 
#elemName:hover{
 /* change bg image */
}

JS

var element = document.getElementById('elemName');
var event = new MouseEvent('mouseover', {
  'view': window,
  'bubbles': true,
  'cancelable': true
});
element.dispatchEvent(event);

edited Jan 24, 2021 at 23:21

phoenixstudio

2,7062 gold badges19 silver badges23 bronze badges

answered Jan 24, 2021 at 21:12

Jordi Parra Crespo

712 bronze badges

Comments

Pluto · Accepted Answer · 2012-11-08 10:09:04Z

-2

Just change the size of the background image, instead of the source of it! So...

a.class-btn {
    background-image: url('path/to/image-hovered.jpg');
    background-size: 0;
}
a.class-btn:hover {
    background-size: auto;
}

answered Nov 8, 2012 at 10:09

Pluto

3,03630 silver badges38 bronze badges

1 Comment

anthonygore Over a year ago

OP wants a different image for default state and hover so this wouldn't work

Spencer Lively · Accepted Answer · 2013-08-17 05:26:33Z

-3

The best way to do this is to just insert the images onto the webpage and set display to none.

answered Aug 17, 2013 at 5:26

Spencer Lively

315 bronze badges

Collectives™ on Stack Overflow

css: avoid image hover first time blinking

14 Answers 14

10 Comments

3 Comments

2 Comments

3 Comments

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

14 Answers 14

10 Comments

3 Comments

2 Comments

3 Comments

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related