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.
This question is related to
html
css
twitter-bootstrap-3
try the following example. Image overlay with text on image. demo
<div class="thumbnail">
<img src="https://s3.amazonaws.com/discount_now_staging/uploads/ed964a11-e089-4c61-b927-9623a3fe9dcb/direct_uploader_2F50cc1daf-465f-48f0-8417-b04ac68a999d_2FN_19_jewelry.jpg" alt="..." />
<div class="caption post-content">
</div>
<div class="details">
<h3>Robots!</h3>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
css
.post-content {
background: rgba(0, 0, 0, 0.7) none repeat scroll 0 0;
opacity: 0.5;
top:0;
left:0;
min-width: 500px;
min-height: 500px;
position: absolute;
color: #ffffff;
}
.thumbnail{
position:relative;
}
.details {
position: absolute;
z-index: 2;
top: 0;
color: #ffffff;
}
Set the position to absolute; to move the caption area in the correct position
CSS
.post-content {
background: none repeat scroll 0 0 #FFFFFF;
opacity: 0.5;
margin: -54px 20px 12px;
position: absolute;
}
Is this what you're after?
I added :text-align:center
to the div and image
Source: Stackoverflow.com