DarthVader DarthVader - 6 months ago 51
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">

<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 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

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.

Comments