DarthVader DarthVader - 2 years ago 196
HTML Question

Bootstrap 3: Text overlay on image

I am using bootstrap 3 thumbnail as follows:

<div class="thumbnail">
<img src="/img/robot.jpg" alt="..." />
<div class="caption post-content">

<p>Lorem ipsum dolor sit amet</p>


I want the
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
div on top of 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 Source

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

Check this fiddle

.post-content {
    position: absolute;



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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download