Position a image over another existing `<img />` in CSS

I am doing a page where I show thumbnails for videos that, when you click, it popups a YouTube video.

This thumbnails are s开发者_如何学运维imple images of 195x195 but the end client it will upload as it, and I would like to add via CSS a "play icon" over the image of the video (compatible with IE7+). I've no idea on how to handle this.

Can anyone help me?

Thank you in advance!

you might want to do something like this:

  <div class="imageWrapper" style="position: relative; width: 195px; height: 195px;">
   <img src="/path/to/image.jpg " alt=.. width=.. height=..style="position: relative; z-index: 1;" />
   <img src="/path/to/play.jpg " alt=.. width=.. height=.. style="position: absolute;left:80px; top: 80px;z-index: 10;" />
  </div>

of course do not use style="", but put styles into separate CSS files.

Explanation:

put two images into div. If you give position: relative; property to your wrapper div, then anything inside this div would be position relatively to it. It means, you can add position: absolute; to the play image and using left: XXpx; and top: XXpx; you can position it where you want. You might want to use z-index to define which picture should be on the top. The higher z-index the higher layer. Please note: z-index works only if position is set.

You can use position: relative or position: absolute to position images on top of the other.

When positioning absolute, these elements are positioned absulute within the parent element that has a relative or absolute position, so not relative to the page as is often thought.

I demonstrated this in this fiddle:

http://jsfiddle.net/W5TFS/

You can create a class that will show the image.

showPlay{
    background-image:url('play.png');
    z-index:1
}

Then you can use it in every image that you need to show it.

You can try it here.