rollovers

[stevedc]

hi all,

I'm wondering as to how to achieve something like this with CSS.
http://hivemodern.com/products/?cid=39&cid2=161

If you rollover a piece of furniture, text displays below it. The questions is really that simple. I want to rollover an image and have the name of the piece of furniture display below it. I know how to create CSS rollovers, but I dont want to the text to be part of the image because like the image, the small font will be compressed. Any ideas?

[Medyman]

I don't understand what you mean by:

I know how to create CSS rollovers, but I dont want to the text to be part of the image because like the image, the small font will be compressed.

If you know how to create CSS rollovers, the process here really is no different.

The below should work in all browsers (even IE6)

<a href="#"><img src="img.jpg" alt="image"><span>Title of Image</span></a>

CSS:

a span {
   display:none;
}
a:hover span {
   display:block;
}

You'll need to add positioning and layout and all that but that's the general technique.

[olveyphotodesign]

Good Day,

I looked at the site you referenced and didn't see the rollover effect you want. However I think your question will be answered with the following link.

The example is by Eric Meyer. http://meyerweb.com/eric/css/edge/popups/demo.html Look at the NavBar on the left side.

Good Luck,
Ben