CSS: Avoid image hover first time blinking / flicker

If you’ve ever used image replacement on hover then you will have noticed this annoying ‘blinking/flicker’ the first time you hover over the element. That’s because we are not pre-loading the image and so I would recommend loading the image to prevent this.

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);

This can be done in various other ways but the CSS method is my preferred method.

If you want to go ahead and use a JavaScript method you can use the code below:-

function preloader() {
	if (document.images) {
		var img1 = new Image();
		var img2 = new Image();
		var img3 = new Image();

		img1.src = "http://domain.com/path/to/image-001.gif";
		img2.src = "http://domain.com/path/to/image-002.gif";
		img3.src = "http://domain.com/path/to/image-003.gif";
function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	} else {
		window.onload = function() {
			if (oldonload) {

I hope this helps!


Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development and web site design. His expertise is WordPress & Magento as well as many other frameworks. Would you like to work with Nathan? Send him an email on [email protected]

It’s good to share