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 :

....








...
...

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:

 

Share
Posted by Zen on 30 June 2009 9 comments
Tags : , , ,



or Subscribe to specific category only :


Post thumbnail of CSS & JavaScript: Increase Page Load Speed by Compressing Files
CSS & JavaScript: Increase Page Load Speed by Compressing Files
Post thumbnail of Create a Fancy Search Box using CSS
Create a Fancy Search Box using CSS



  - 9 Comments

Add Comment

Kish says:
September 24, 2009 at 10:33 AM

Hi,

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

Yuko says:
October 16, 2009 at 9:19 AM

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:
November 6, 2009 at 4:24 AM

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:
November 9, 2009 at 6:31 PM

@nate smith, hi, more explaination? =]

Jack wills uk says:
May 2, 2011 at 7:45 PM

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:
November 7, 2011 at 3:55 PM

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

display:none;

Zen says:
November 8, 2011 at 1:06 AM

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

Crystal says:
September 8, 2012 at 4:22 AM

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

Leave a Reply

You must be logged in to post a comment.

Previous Post
« Next Post
»
Subscribe : Blog Feed • Comments Feed