Preload Images using CSS – For Smooth & Instant Rollover Effect

Posted in Design Tips on 30 June 2009 9 comments

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 :

....
<body>
<div class="preload">
<img src="IMAGE_TO_PRELOAD_1" />
<img src="IMAGE_TO_PRELOAD_2" />
<img src="IMAGE_TO_PRELOAD_3" />
</div>
...
...

The CSS:

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

EXPLAINATION

  • We place the container after <body> 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:

<div style="position:absolute;top:0px;left:0px;width:1px;height:1px;visibility:hidden;overflow:hidden;">
<img src="http://zenverse.net/wp-content/uploads/2009/06/csshover_2.jpg" /></div>
 
<img src="http://zenverse.net/wp-content/uploads/2009/06/csshover_1.jpg" onmouseout="this.src='http://zenverse.net/wp-content/uploads/2009/06/csshover_1.jpg'" onmouseover="this.src='http://zenverse.net/wp-content/uploads/2009/06/csshover_2.jpg'" />

 

Posted by Zen on 30 June 2009 • 10,619 visits 9 comments
Tags : , , ,


or Subscribe to specific category only :




  - 9 Comments


Kish says:

Hi,

Once again thanks for the tutorial
.-= Kish´s last blog ..Save $50 when you spend $250 or more =-.

Yuko says:

The best solution I have found, congratulations, it’s clear, easy, and it dont pretend to be an extrange and bizarre trick.

nate smith says:

how can i get it so that the images are right next to each other so i can use it as a menu.

zen says:

@nate smith, hi, more explaination? =]

Jack wills uk says:

gjhhhhhhhhThere’s visibly a new bundle in order to identify relating to this. I just believe you’ve made various good points inside elements likewise.

I am new to this blog, I must admit it ranks up there among one of the most unique blog ideas I have ever seen.

nev says:

You don’t need all that. All you need is one line of css:

display:none;

Zen says:

in some browsers, having display:none will not preload the images. thats why we have to do that.

nev says:

which browsers?

Crystal says:

Once again another absolutely perfect tut.! Thank you again!! FB liked/shared, G+1′d, and Digg’d!!

Leave a Reply

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.

Previous Post
«
Next Post
»