Preload Images using CSS – For Smooth & Instant Rollover Effect

Zen — Tue, 30 Jun 2009 11:33:30 +0000

To improve your website’s design or user experience, you might need to preload some images for smooth hover or rollover. Instead of using javascript to preload the images, we can do that using CSS.

1. A container that hold the images to be preloaded

The HTML :

^?View Code HTML

....






...
...

The CSS:

^?View Code CSS

.preload {
position:absolute;
top:0px;
left:0px;
width:1px;
height:1px;
visibility:hidden;
overflow:hidden;
}

EXPLAINATION

We place the container after and assign an absolute position to it because usually there will not be anything at that position.
We make the container 1 pixel width and height so that visitors cannot see it.
Besides, we need to set its overflow to hidden so that the overflow wouldn’t be visible.
Lastly, change its visibility to hidden so that the container is invisible (but it is still there and most importantly it loads)

2. Demo & Rollover Code

Demo:

The Code:

^?View Code HTML

ZENVERSE » preload

Preload Images using CSS – For Smooth & Instant Rollover Effect

1. A container that hold the images to be preloaded

2. Demo & Rollover Code