Bootstrap 3 CSS image caption overlay

Question

I use bootstrap and having a problem to overlay caption over an image, the caption div just cannot fit within the box, as shown below:

enter image description here

HTML:

<div class="col-sm-4">
    <a href="#">
        <img src="images/upload/projects/21/wolf.jpg" class="img-responsive" alt="" />
        <div class="desc">
            <p class="desc_content">The pack, the basic unit of wolf social life.</p>
        </div>
    </a>
</div>

<div class="col-sm-4">
    <a href="#">
        <img src="images/upload/projects/21/cake.png" class="img-responsive" alt="">
        <div class="desc">
            <p class="desc_content">The pack, the basic unit of wolf social life.</p>
        </div>
    </a>
</div>

CSS:

div.desc{
    position: absolute;
    bottom: 0px;
    width: 100%;
    background-color: #000;
    color: #fff;
    opacity: 0.5;
    filter: alpha(opacity=50);
}

SOLUTION:

Thanks to @himanshu to solved the issue.

div.desc{
    background-color: #000;
    bottom: 0;
    color: #fff;
    left: 0;
    opacity: 0.5;
    position: absolute;
    width: 100%;
}

.fix{
    width: 100%;
    padding: 0px;
}

try using box-sizing: border-box; for p.desc_content class – Vitorino fernandes Sep 24 '14 at 06:46 — Vitorino fernandes, Sep 24 '14 at 06:46
@Vitorino Fernandes, No luck! – conmen Sep 24 '14 at 06:48 — conmen, Sep 24 '14 at 06:48
try remove width:100% and add left:0; right:0; for div.desc – Vitorino fernandes Sep 24 '14 at 07:00 — Vitorino fernandes, Sep 24 '14 at 07:00
@Vitorino Fernandes, please view my edited post. – conmen Sep 24 '14 at 07:08 — conmen, Sep 24 '14 at 07:08
add left:0; right:0; for div.desc – Vitorino fernandes Sep 24 '14 at 07:13 — Vitorino fernandes, Sep 24 '14 at 07:13

score 3 · Accepted Answer · edited Jun 07 '16 at 10:04

3

I think problem is in placement rather then overlay, div.desc is absolute and image is its sibling. So overlay will not follow image it will follow only anchor tag or your div.wrapper.

From what I can see is that there is a margin on image or padding in anchor or wrapper.

The best solution is to put desc and image in another div with 100% width with 0 padding.

<div class="col-sm-4 wrapper">
    <a href="#">
<div class="fix">
        <img src="images/upload/projects/21/wolf.jpg" class="img-responsive" alt="" />
        <div class="desc">
            <p class="desc_content">The pack, the basic unit of wolf social life.</p>
        </div></div>
    </a>
</div>

CSS:

.fix{width:100%; padding:0px;}

edited Jun 07 '16 at 10:04

Besi

22,579
24
131
223

answered Sep 24 '14 at 07:20

himanshu

1,732
1
11
12

use div.desc{width:100%;} – himanshu Sep 24 '14 at 07:35
give position: relative; .fix{ width: 100%; padding: 0px; position: relative; } – Cavid Apr 20 '16 at 08:43

score 3 · Answer 2 · answered Jun 22 '16 at 21:43

For others trying to overlay a caption on an image in Bootstrap, consider using carousel captions.

See here: http://www.w3schools.com/bootstrap/bootstrap_carousel.asp

  <div class="carousel-caption">
    <h3>Chania</h3>
    <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
  </div>

score 2 · Answer 3 · answered Sep 24 '14 at 07:49

Try this

 <div class="wrapper">
    <div class="">
        <img src="images/upload/projects/21/wolf.jpg" class="img-responsive" alt="" >
    </div>
    <div class="desc_content" style="">The pack, the basic unit of wolf social life.</div>
 </div>
 <div class="wrapper">
    <div class="">
         <img src="images/upload/projects/21/wolf.jpg" class="img-responsive" alt="" >
    </div>
    <div class="desc_content" style="">The pack, the basic unit of wolf social life.</div>
 </div>

css

div.desc_content {
background-color: #000;
color: #FFF;
font: bold 11px verdana;
padding-left: 10px;
padding-top: 7px;
height: 23px; opacity: 0.7;
position: relative; 
top: -30px;
}
div.wrapper{
    float: left;
    position: relative;
    margin: 10px;
 }

score 1 · Answer 4 · answered Sep 24 '14 at 07:19

1

Use this attributes for div.desc class

div.desc{
    position: absolute;
    bottom: 0;
    background-color: #000;
    color: #fff;
    opacity: 0.5;
    left:0;   /** new  **/
    right:0;  /** new  **/
    filter: alpha(opacity=50);
}

answered Sep 24 '14 at 07:19

Vitorino fernandes

15,794
3
20
39

score 1 · Answer 5 · answered Jun 18 '20 at 09:22

This is what works for me. With this you will find the caption at the bottom of the image.

<div class="container-fluid">   
    <img src="someimg.jpg" class="img-fluid " alt="Patience">   
    <div class="carousel-caption d-block">
        <h1>Some label</h1>
        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
    </div>
</div>

if you want it at the top then in your CSS do the following:

.carousel-caption{
top:0;
bottom:auto;
}

Bootstrap 3 CSS image caption overlay

5 Answers5

Linked

Related