The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS the right way to display titles for thumbnails

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #36801

    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’


    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.


    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:


  • css
    li div{
    display none;
    move above and into position with absolute positioning }

    on hover div display visible

    is there a better way?


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?


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


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?


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

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.