- This topic is empty.
February 23, 2012 at 11:24 am #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’February 23, 2012 at 11:35 am #97295Paulie_DMember
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.February 23, 2012 at 11:44 am #97297
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:
move above and into position with absolute positioning }
on hover div display visible
is there a better way?February 23, 2012 at 12:09 pm #97300Paulie_DMember
How were you planning on changing the content of the div?
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.February 23, 2012 at 12:58 pm #97302
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?February 23, 2012 at 2:36 pm #97307
i just set the div to absolute and moved it wherever I wanted and it only shows up on hover
- The forum ‘CSS’ is closed to new topics and replies.