Using text-indent, needs no extra markup but doesn't work if images switched off:

Hello World


Extra span method, produces bloated markup but does work if images switched off:

Hello World


Small white text "hidden" in image but contrasting background color shows when images switched off:

Hello World


Using opacity (requires additional markup, only supported by modern browsers, doesn't work with images switched off):

Hello World


Example of CSS based rollovers using the extra span technique:



« Back to sourcemotion Web Design Articles