the right way to display titles for thumbnails

[shamai]

I’m making a website for someone and he has 12 thumbnails of pictures.
i want that when you hover over any thumbnail, the name of the picture appears above all the thumbnails centered in one spot.

my first idea was to make a ‘before’ pseudo class for each thumbnail and display the name on hover. but it seemed it would be more faster if I gave each thumbnail (which is a list of thumbnails) a span. set all spans in li to display none and then on hover show the span. and it would work in ie7 and 8.

is this a good way to do this or is there a ‘proper way’

[Paulie_D]

I’m a little confused…where do you want the picture name to appear?

Above the image or in a specified div?

I hate spans with a vengeance…they should be used sparingly if at all IMO.

[shamai]

12 thumbnails in a div
above that div, centered the name would appear when hovered on the thumbnail.

if I use span or div inside the li i can target it like this:

html

[Paulie_D]

How were you planning on changing the content of the div?

I don’t think that’s something you would want to do with CSS. It sounds like something you would need to do with Javascript.

Why not have a hover state that displays the name above or overlaying the hovered image…much easier and more logical?

Example: http://tinkerbin.com/b6Vv2LHi

Also dead easy to code using the figure & figcaption tags.

[shamai]

the thumbnails are pretty small for overlaying text.
what i meant was the div inside each li would be named. then I would just use css to position each div so all these divs take up the same spot on the page but are invisible unless the li is hovered on.

why should i stay away from span?

[shamai]

cool!
I got it to work without javascript and without using target.
i just set the div to absolute and moved it wherever I wanted and it only shows up on hover

[Author]

Posts