Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Adding descriptions to images on hover

Placement/appearance of descriptions varies between browers



6:31 pm on Jan 18, 2006 (gmt 0)

5+ Year Member


I have a small number of photos on a page and would like to have a description appear under each photo when hovering over the image.

I've used the following html and css to try and produce the effect.

<div class="photos">
<a href="photo.html"><img src="photo.jpg" alt="Photo" /><span class="caption">Description of photo</span></a>

.photos a { position: relative; }
.photos a span { display: none; color: white; }
.photos a:hover span { display: block; position: absolute; top: 200px; left: 0; }

The images were all 180px high, so I chose the position of the span to be 200px from the top, hoping to place them just below the image.

The description text displays just below the image in Opera, but in Firefox it appears much lower, seemingly being placed 200px below the bottom of the image, rather than 200px below the top of the image.

The description doesn't appear at all on hover in IE.

Is there a way to get the description on hover to display just below the image in all browsers?

Why is the description on hover not displaying at all in IE? How can I fix this?

Thanks very much

First post, please be gentle. Hopefully this is the correct forum for the post.


8:06 pm on Jan 18, 2006 (gmt 0)

10+ Year Member


I found a very good website for you to look at on how to do tooltips:


I think that does the trick.


10:03 pm on Jan 18, 2006 (gmt 0)

10+ Year Member

The description doesn't appear at all on hover in IE.

Unfortunately, IE only supports a:hover on anchors. You'd need to run some Javascript for IE to function like standard browsers do on a:hover.

As to the other problems, I must pass.



11:31 am on Jan 19, 2006 (gmt 0)

5+ Year Member

Thanks music_man, the tooltips tutorial is a good clear explanation of how to use this kind of effect.

However, it doesn't seem to address the issue I'm experiencing. I had already set up my hover & span as that tutorial describes.

teylyn, I am using the hover on an anchor element (the display changes from a compared to a:hover)

The tutorial does answer why the hover effect wasn't displaying in IE/Win though. It was because of the issue that IE needs to see a change in another css property (eg. background, font-size etc.) on the link in order to display the hover effect. Strangely, it doesn't have to be an actual change, even an empty one will do.
This is addressed on Page 3 of the css tooltips tutorial.

By adding an extra line

.photos a:hover { background: ; }

to my css, the hover effect is now displayed in IE aswell.

IE behaves like Opera, producing the span just below the link images.

The issue still stands that Firefox seems to be applying my absolute positioning from the bottom of the link image while Opera and IE are applying it from the top of the link image.

Any more ideas on if/how I might be able to get my hover descriptions to display consisently across all browsers?

Thanks very much.


12:43 pm on Jan 19, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

What if you change the first rule in your css:

.photos a { position: relative; }

into this:

.photos { position: relative; }

Positioning your span in a block level element might work better than positioning it in an inline box.


11:34 am on Jan 25, 2006 (gmt 0)

5+ Year Member

Thank you Span, you cracked it!

Moving the position: relative; to the .photos div solved the issue of the cross browser height differences.

However it meant of course that with the given absolute positioning the description text remained under the first image for all the hovers, when ideally I wanted the description to appear under each appropriate image.

Following your hint of the relative positioning working better on a block element rather than an inline element, however, I simply changed added display: block; to the .photos a selector and then rejigged my floats accordingly to get the effect I was looking for.

Excellent, thank you.

The code used now:

<div class="photos">
<a href="photo1.html"><img src="photo1.jpg" alt="Photo1" /><span class="caption">Description of photo1</span></a>
<a href="photo2.html"><img src="photo2.jpg" alt="Photo2" /><span class="caption">Description of photo2</span></a>

.photos a { display: block; position: relative; float: left; margin:0.5em; }
.photos a span { display: none; color: white; }
.photos a:hover { background: ; text-decoration: none; }
.photos a:hover span { display: block; position: absolute; top: 200px; left: 0; width: 150px; }


Featured Threads

Hot Threads This Week

Hot Threads This Month