How to place an image over another?

Question

How to put an image over another bigger image, like on youtube, a play button is displayed on top of video thumbnail?

Answer 1

Make a semi-transparent PNG graphic with a "Play" symbol and the size you want (e.g. 240x320).

Let's say you named it "overlay.png", and let's say the YouTube-generated thumbnail is at http://img.ytimg.com/abcdefg/0.jpg

Now all you need in your code is this:

<a href="destination_of_your_link">
    <img src="overlay.png" width="320" height="240" border="0"
         style="background: url(http://img.ytimg.com/abcdefg/0.jpg) center center black;" />
</a>

As long as your target audience is not still using IE6, you should be safe.

Answer 2

I'm not sure that YouTube uses images for this effect, isn't it still the Flash player?

Anyhow, exactly how this is done depends very much on the design you want to achieve. Lets assume that you want to achieve the YouTube style, where you have a thumbnail image and want to overlay a play button image on top. If you want the thumbnail to be an actual <img> tag you will need some extra markup, like this:

<div class="thumb-wrapper">
<img src="mythumbnail.gif" alt="my awesome video" /><span></span>
</div>

The wrapper <div> is required so you can target the img and span correctly, and have dimensions to contain them in. The span is where the overlay image will go.

.thumb-wrapper {
position:relative;
}

.thumbwrapper span {
position:absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 100;
background: transparent url(overlay.png) no-repeat;
}

(I haven't actually tested this, if its blatently wrong let me know I'll revise it!)

This assumes a couple of things:

1. Your thumbnails will always be a fixed size and your overlay image matches that
2. Your overlay image is a semi-transparent PNG

You could also use the opacity: style to achieve #2. Of course, IE6 will rear it's ugly head and you'll need to use a PNG fix for it if going the transparent image route, or a separate opacity filter if using that method. Both of these are undoubtadly answered elsewhere on Stack Overflow or easily google-able.

If you have other requirements it might be possible to do this without the extra markup, as I said it all depends on what you need exactly. Some requirements may not be possible without JavaScript (which would of course mean you could inject any extra markup with that!).