Welcome to Grubor Design Factory

You probably had situation when you made beautiful menu with large icons different for each menu point. Now you want to have shinny effect when user go rollover your menu point but he will need to wait until this “on hover” image loads. Often he don’t wait and he don’t see the effect. So how to make this work without waiting to load this extra images? Here’s the trick.

List all your hover images anywhere into your html code and give them class name “hidden”. It should look like this:

Now add this class to your CSS and make all this images invisible. It should look like this:

.hidden {
display: none;
}

This simple trick make this images invisible but they are going to be loaded and placed in users browser cache. So when user goes “mouse over” this images will be already loaded and displayed without any delay.

Since vertical-align: middle doesn’t works quite well I’ll try to explain what is going on there.

Vertical align of text “doesn’t know” what is the height of a div in which he is sitting. So it sets text in the middle of a line height of text. All you have to do is to set line height as high as your div.

Here’s the result:

This is just a small hack to menage transparent background using CSS. Firefox have no problem with adding transparent image as background but IE does.

Make transparent background image like 10×10 pixels. You can simply make black image and make it 50% transparent. Save it as png or gif. This will be used as background image. So here’s the code:

/* This is IE part of hack. */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='transparent_bg.png');
/* This is standard way of doing this which is fine with FF. */
background: url(transparent_bg.png);

However this is not a valid CSS code so if you need it - you can use it but W3C does not allow this.