Welcome to WebmasterWorld Guest from 107.20.34.173

Forum Moderators: not2easy

Message Too Old, No Replies

Adding descriptions to images on hover

Placement/appearance of descriptions varies between browers

     

krakow

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

5+ Year Member



Hi,

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>
</div>


.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.

music_man

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

5+ Year Member



Hi

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

[communitymx.com...]

I think that does the trick.

teylyn

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.

tey

krakow

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.

Span

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.

krakow

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>
</div>

.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