You can’t put the child behind the parent like that. You could have the thumbnail as the background and the play button as the image although I guess that won’t be feasible. Therefore add an extra element like a span and then place the play button as the background of the span and absolutely position it on top.
Paul has it right, though I’m wondering why he’s using a paragraph on a non-text element (I know, dead horse)
Also, he left the background-color on the span, which will erase the video thumbnail underneath it… 50%/50% does not center it in all browsers (sets it offset) so use the named properties, and if it’s going to be the same size why have two border declarations?
There’s also no need to be dicking with Z-index since absolutes position over static elements.
I would assume since this is a thumbnail, you’d probably have more than one per page? Let’s make that a list while we’re at it.
Here’s an example of how I’d approach such a thing - I put it all in a list and show multiple thumbs, added a bit of transparency to the overlay, generally cleaned out a bunch of unnecessary stuff…
lol - It’s a pet hate of mine and I don’t like images in divs because they are not divisions of content but actual content. An image speaks a thousand words and words go in paragraphs - besides it’s less characters anyway
A lot of people disagree with me on this so feel free to differ - I won’t mind.
(I would actually have used a list like your example anyway for a real world example.)
Also, he left the background-color on the span, which will erase the video
thumbnail underneath it…
Yes good point.
50%/50% does not center it in all browsers (sets it offset) so use the named properties
center center is exactly the same as 50% 50% and I don’t know any modern browser that gets this wrong. (I don’t actually know of an old browser that gets it wrong either ;))
Here’s an example of how I’d approach such a thing - I put it all in a list and show multiple thumbs, added a bit of transparency to the overlay, generally cleaned out a bunch of unnecessary stuff…