title: Overlay issue with Bootstrap
body: <p>I have problems with the CSS overlay. the overlay pattern doesn't stretch on the whole width of the image size. There is always a small border on the left side. Any ideas?
  <a href="http://www.bootply.com/FrnoIvUpxS" rel="nofollow">http://www.bootply.com/FrnoIvUpxS</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.img-container {
      position: relative;
      cursor: pointer;
      display: table;
      overflow:hidden;
  text-align:center;  
  width:100%;
  min-height: 360px;
  }
  
  .img-container img {
   opacity: 1;
      position: absolute;
      min-height:360px;
      width: 500px;
  }
  
  
  .img-container .overlay {
  
      position: relative;
  
      height: 100%;
      vertical-align:middle;
      display: table-cell;
      background-color:rgba(130,216,209,0.00);
      opacity:0.0;
  }
  
  
  .img-container p{
      width:inherit;
      margin-top:25px;
      } 
  .img-container h3 {
  
       } 
  .img-container:hover .overlay {
  background-color:rgba(130,216,209,0.9); 
  
          opacity:1;
   }
   .img-container:hover img{
          -moz-transform: scale(1.4);
      -o-transform: scale(1.4);
      -webkit-transform: scale(1.4);
      transform: scale(1.4);
      opacity:1;}
  
      .img-container:hover p, .img-container:hover h3 { }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;div class="container"&gt;
  &lt;div class="row"&gt;
  &lt;div class="col-md-4"&gt;
  
  &lt;div class="img-container"&gt;
    &lt;img src="http://placehold.it/500x500" class="img-responsive" alt=""&gt;
    &lt;div class="overlay"&gt;
    &lt;h3&gt;TIBET&lt;/h3&gt;
    &lt;p&gt;RISING IN THE NORTH&lt;/p&gt;
    &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;div class="col-md-4"&gt;
  &lt;div class="img-container"&gt;
    &lt;img src="http://placehold.it/500x500" class="img-responsive" alt=""&gt;
    &lt;div class="overlay"&gt;
    &lt;h3&gt;POKER&lt;/h3&gt;
    &lt;p&gt;PLAY YA CARDS RIGHT&lt;/p&gt;
    &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;div class="col-md-4"&gt;
  &lt;div class="img-container"&gt;
    &lt;img src="http://placehold.it/500x500" class="img-responsive" alt=""&gt;
    &lt;div class="overlay"&gt;
    &lt;h3&gt;INDUSTRY&lt;/h3&gt;
    &lt;p&gt;MACHINES THAT DO IT&lt;/p&gt;
    &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>