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:

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

Answer 1

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