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

Question

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

This thumbnails are simple 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!

Answer 1

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.