title: Bootstrap 3 CSS image caption overlay
body: <p>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:</p>
  
  <p><img src="https://i.stack.imgur.com/3J19O.jpg" alt="enter image description here"></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="col-sm-4"&gt;
      &lt;a href="#"&gt;
          &lt;img src="images/upload/projects/21/wolf.jpg" class="img-responsive" alt="" /&gt;
          &lt;div class="desc"&gt;
              &lt;p class="desc_content"&gt;The pack, the basic unit of wolf social life.&lt;/p&gt;
          &lt;/div&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div class="col-sm-4"&gt;
      &lt;a href="#"&gt;
          &lt;img src="images/upload/projects/21/cake.png" class="img-responsive" alt=""&gt;
          &lt;div class="desc"&gt;
              &lt;p class="desc_content"&gt;The pack, the basic unit of wolf social life.&lt;/p&gt;
          &lt;/div&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>div.desc{
      position: absolute;
      bottom: 0px;
      width: 100%;
      background-color: #000;
      color: #fff;
      opacity: 0.5;
      filter: alpha(opacity=50);
  }
  </code></pre>
  
  <p><strong>SOLUTION:</strong></p>
  
  <p>Thanks to @himanshu to solved the issue. </p>
  
  <pre><code>div.desc{
      background-color: #000;
      bottom: 0;
      color: #fff;
      left: 0;
      opacity: 0.5;
      position: absolute;
      width: 100%;
  }
  
  .fix{
      width: 100%;
      padding: 0px;
  }
  </code></pre>