Put the image on top of another existing `<img />` in CSS

Question

I am making a page where I show thumbnails for videos that when you click on it, videos pop up on YouTube.

These thumbnails are simple 195x195 images, but the final client that it will download, and I would like to add a “play icon” in the video image via CSS (compatible with IE7 +). I do not know how to handle this.

Can anybody help me?

Thank you in advance!

Answer 1

you can 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 the styles in separate CSS files.

Explanation:

put two images in a div. If you pass the position: relative; property position: relative; to your wrapper div, then everything that is inside this div will relate to it relatively. This means that you can add position: absolute; to the playback image and using left: XXpx; and top: XXpx; , you can put it wherever you want. You can use z-index to determine which image should be on top. The higher the z-index the higher the level. Please note: z-index only works if position set.

Answer 2

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

When positioning an absolute value, these elements are positioned absurdly inside the parent element, which has a relative or absolute position, and therefore does not apply to the page, as is often believed.

I demonstrated this in this fiddle:

http://jsfiddle.net/W5TFS/

Answer 3

You can create a class that displays the image.

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

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

You can try it here .