homepage Welcome to WebmasterWorld Guest from 54.242.126.9
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Adding descriptions to images on hover
Placement/appearance of descriptions varies between browers
krakow

5+ Year Member



 
Msg#: 8251 posted 6:31 pm on Jan 18, 2006 (gmt 0)

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

5+ Year Member



 
Msg#: 8251 posted 8:06 pm on Jan 18, 2006 (gmt 0)

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

5+ Year Member



 
Msg#: 8251 posted 10:03 pm on Jan 18, 2006 (gmt 0)

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

5+ Year Member



 
Msg#: 8251 posted 11:31 am on Jan 19, 2006 (gmt 0)

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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 8251 posted 12:43 pm on Jan 19, 2006 (gmt 0)

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

5+ Year Member



 
Msg#: 8251 posted 11:34 am on Jan 25, 2006 (gmt 0)

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; }

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved