Here are two examples of a list of links with rollover effects in action.
For this first example, the text are hidden usually, but when you hover your cursor over the tabs, the text appears. This is made possible using the text-indent: number px; property of CSS. The black border at the bottom of the links is actually a background image being repeated along the x-axis.
The tabs are generated using Tabs Generator. For the exact original image of the blue tags used, click here.
Here is another example. The text is rasterized in the image. The text-indent property is set to a constant -9999px to ensure that the text still stays in the page (but beyond the boundaries of any screens), so when your visitor searches for the term he'll still be able to find it.
Icons used are from the Dropline Neu! v0.10 icon package.
It's perfectly fine that you don't understand a single thing written on this page. You can always contact me for details! You can also request for other CSS tutorials, I will post them as soon as I have time.
This page is XHTML and CSS Valid | This page is loaded within 0.24seconds.