How to set an image over an image using css?

hi

I’ve a page where i list the thumbnails of the video and i want to display a play button over the thumbnails.

I tried the following using css, but didn’t work…

i think i’m doing something wrong, how can i do this?

.video-thumb
{
height:72px;
width:120px;
background:#ffffff;
background-image:url('http://doamin.com/images/play.png');
background-repeat:no-repeat;
background-position:center;
padding:4px;
border:#eceaea 1px solid;
margin:0 auto;
z-index:2;
}

.video-thumb img
{
    z-index:-100;
}

<div class='video-thumb'>
<a href="somthing.php">
<img id='thumb' width=120 height=72 src='http://domain.com/image1.jpg'></a>
</div>

Hi,

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.

This assumes thumbnails are all the same size.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
a img {
    border:none;
}
.video-thumb {
    width:120px;
    padding:4px;
    margin:0 auto;
    height:72px;
    border:1px solid #000;
}
.video-thumb span {
    position:absolute;
    left:0;
    top:0;
    height:70px;
    width:118px;
    background:#fff url('http://doamin.com/images/play.png') no-repeat 50&#37; 50%;
    border:1px solid #eceaea;
    z-index:2;
}
.video-thumb a {
    display:block;
    height:72px;
    width:120px;
    text-decoration:none;
    position:relative;
}
.video-thumb img {
    position:relative;
    z-index:1;
    display:block;
}
</style>
</head>
<body>
<p class='video-thumb'><a href="somthing.php"><img id='thumb' width='120' height='72' src='http://domain.com/image1.jpg'><span></span></a></p>
</body>
</html>


Paul has it right, though I’m wondering why he’s using a paragraph on a non-text element :wink: (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…

http://www.cutcodedown.com/for_others/kvijayhari/template.html

as with all my examples the directory:
http://www.cutcodedown.com/for_others/kvijayhari

is unlocked so you can get at it’s bits and pieces. Should work all the way back to IE 5.5

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 :slight_smile:

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…

http://www.cutcodedown.com/for_others/kvijayhari/template.html

Good example again Jason - you made me feel lazy.:slight_smile: