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!).

Answer 3

You will find the solution in the following thread on StackOverflow: How to draw a graphic over another graphic

Shortly (quoting after Ipsquiggle) :

<div style="position:relative">
  <div>
    <img url="backgroundimg.png">
  </div>
  <div style="position:absolute; left:0; top:0;">
    <a href="foo.html"><img url="smallgraphic.png"></a>
  </div>
</div>

More details why and how it works in the original thread.

Answer 4

If you have good control over image size, we have used the background to various elements - for example, set the background of a table cell to one image and put an img tab inside the cell.

Answer 5

Taking your example of youtube, you could very easily do this with 2 images and 1 img tag and a little bit of CSS of course ;)

<style>
    img.youtube {
        width:500px; height:500px; 
        margin:0; padding:0; 
        background:transparent url(/point/to/your/larger/image.jpg) no-repeat center
    }
</style>

<img src="/point/to/youtube/play/image.png" alt="Gotta have alt text ;)" border="0" class="youtube" />

How it works is simple, you have the small youtube image as transparent PNG or GIF and then set the background image as the larger image, this will then give the effect of the smaller image being in the center with no extra markup.