html - Bootstrap 3: Text overlay on image

Question

I am using bootstrap 3 thumbnail as follows:

<div class="thumbnail">
    <img src="/img/robot.jpg" alt="..." />
    <div class="caption post-content">
        <h3>Robots!</h3>
        <p>Lorem ipsum dolor sit amet</p> 
    </div>
</div>

I want the caption to overlay on image but the way being done on Mashable.com

I have tried following but no luck :((

.post-content {
    background: none repeat scroll 0 0 #FFFFFF;
    opacity: 0.5;
    margin: -54px 20px 12px; 
    position: relative;
}

How can I overlay a caption div on top of the image but just like (Mashable.com)?

This works but I want it centered just like Mashable. and centered for every image. for some images, it is not centered.

Answer 1

You need to set the thumbnail class to position relative then the post-content to absolute.

Check this fiddle

.post-content {
    top:0;
    left:0;
    position: absolute;
}

.thumbnail{
    position:relative;

}

Giving it top and left 0 will make it appear in the top left corner.