Robots!
Lorem ipsum dolor sit amet
I am using bootstrap 3 thumbnail as follows:
Lorem ipsum dolor sit amet
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.
解决方案
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.