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.

Actually.. it looks fine to me in jsfiddle: http://jsfiddle.net/dCNXU/ — SaturnsEye, Sep 05 '13 at 08:48
@Adsy it does, but it is not centered. You see in jsfiddle. I want it centered just like mashable. and centered for every image. for some images, it is not centered. — DarthVader, Sep 05 '13 at 08:53

score 37 · Accepted Answer · answered Sep 05 '13 at 08:43

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.

score 7 · Answer 2 · answered Sep 05 '13 at 09:13

7

Is this what you're after?

http://jsfiddle.net/dCNXU/1/

I added :text-align:center to the div and image

answered Sep 05 '13 at 09:13

SaturnsEye

6,297
10
46
62

1

@svarog Sir, just for futures sake ;) – SaturnsEye Aug 04 '14 at 15:22

score 1 · Answer 3 · answered Sep 05 '13 at 08:43

1

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

Bootply

answered Sep 05 '13 at 08:43

Daniel

293
1
6
15

aashish · Answer 4 · 2015-08-08T19:30:10.557

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

Bootstrap 3: Text overlay on image

4 Answers4

Linked

Related