The above screen dumps no longer work so I have removed these pop ups, but you can also use any image you like, for instance if you were describing a sparrow you could have a pop-up image to show your visitors. This could be a link or just a reference image.
So this is a combination of both ideas but done using just CSS.
The basic idea is to have the image in the link along with the text, then use CSS to give the image a zero size (you could use visibility:hidden;). The link is given a position relative and a high z-index to enable you to place the pop-up image in an absolute positon 'relative' to the link and to ensure that the pop-up image is placed on top of any surrounding elements.
When you hover over the link the image is then given its correct size and it pops-up, in this case beneath the link, but you can place it anywhere you like relative to the link.
This works in IE5.01 (although the z-index is ignored), IE5.5, IE6, Firefox, Opera 9 beta (Opera 9 has a bug) and probably most modern browsers on a PC and Mac.
23rd July 2006
Placing the <b> tag around the image and styling this instead make it sort of work in Opera.
Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.
Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.