Adding image over another image - bootstrap - html

Question

I want to add an image over an image.
For example, there's an image in the background and on top of that i need to add an image of a play button. Where the user can play the video by clicking on it. This is also shown on the Shopify homepage.
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img width='100%'
src='http://roomista.com/uploads/hotel-gal/250_SunwayHotelHanoiSuperiorRoom.jpg' />
<div class='img-container'>
<div class='img-text'>
<img src="http://lizkhoo.com/content/play-icon.png" alt="..." />
</div>
</div>
And the CSS is as follows:
.img-container {
width: 100%;
position: relative;
display: inline-block;
margin: 10px 5px 5px;
}
.img-text {
width: 100%;
display: block;
}

Answer 1

Use position: relative on .item and position: absolute on .img-text.
You should not need to use z-index on .img-text, but if it appears under .img-container, use it.
.img-text {
/*position: absolute;*/ Wrong, see edit
width: 100%;
display: block;
/*top: ?; bottom: ?; left: ?; right: ?; //to place it as you want.*/
}
.item{
position: relative;
}
Edit : I misread your code, (badly indented :p)
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img width='100%'
src='http://roomista.com/uploads/hotel-gal/250_SunwayHotelHanoiSuperiorRoom.jpg' />
<div class='img-container'>
<div class='img-text'>
<img src="http://lizkhoo.com/content/play-icon.png" alt="..." />
</div>
</div>
</div>
</div>
So position: absolute on .img-container
.img-container {
position: absolute;
top: ?; bottom: ?; left: ?; right: ?; //to place it as you want.
}
Edit 2 :
A little jsFiddle, like the comment below : http://jsfiddle.net/hsYwV/1/

Answer 2

The easiest way to do this is to set the image as a background.
html:
<div class="item-active">
<img class='img-text' src="http://lizkhoo.com/content/play-icon.png" />
</div>
css:
.item-active {
width: 200px;
height: 200px;
background-image: url('http://roomista.com/uploads/hotel-gal/250_SunwayHotelHanoiSuperiorRoom.jpg');
}
.img-text {
position: relative;
left: 75px;
top: 75px;
width: 50px;
height: 50px;
}
JScript:
$(".img-text").bind("click", function(){
alert("play video");
});
http://jsfiddle.net/J7qnF/2/