title: bootstrap: hover overlay (via css) is bigger than image
body: <p>I'm a really basic coder, so please bear with me if my question sounds silly. I'm using Bootstrap 3 to make some sort of a gallery page, so there are category filters on top, and rows of images that are responsive (3 horizontally on desktop, 2 on tablet, and 1 on mobile). So I'm currently using a lightbox plugin such that when the user clicks on the thumbnail, it will show a lightbox. So here's the code in HTML: </p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div align="center" class="filter-categories"&gt;
        &lt;button class="btn btn-default filter-button" data-filter="all"&gt;all&lt;/button&gt;
        &lt;button class="btn btn-default filter-button" data-filter="fine-art"&gt;fine art&lt;/button&gt;
        &lt;button class="btn btn-default filter-button" data-filter="actor-portraits"&gt;portraits&lt;/button&gt;
        &lt;button class="btn btn-default filter-button" data-filter="landscape"&gt;landscape&lt;/button&gt;
        &lt;button class="btn btn-default filter-button" data-filter="street"&gt;street&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;br/&gt;
    &lt;div class="row" align="center"&gt;
      &lt;!-- fine art--&gt;
      &lt;div class="gallery_product filter fine-art col-md-4 col-sm-6 col-xs-12"&gt;
      &lt;a href="images/fine art photography/image-1.jpg" data-lightbox="gallery" data-image-alt="Image 1"&gt; &lt;img src="images/fine art photography/image-1.jpg" alt="Alt Text" class="gallery-image" /&gt;
          &lt;div class="overlay"&gt;
            &lt;div class="text"&gt;Hello World&lt;/div&gt;
          &lt;/div&gt;
          &lt;/a&gt; &lt;/div&gt;
  
      ...
  </code></pre>
  
  <p>so that when <code>&lt;!-- fine art--&gt;</code> is clicked, it shows up as a lightbox, and arrows will appear to navigate to the next image. For <code>overlay</code>, on hover over the image thumbnail, a black box with <code>text</code> is supposed to show up, but it takes on an extra 15px on the left and right from <code>col-md-4 col-sm-6 col-xs-12</code>, for some weird reason. below is the CSS for the section</p>
  
  <pre><code>/*hover effect*/
  
  /*.gallery_product.col-md-4.col-sm-6.col-xs-12{
      padding: 0 !important;
  }*/
  .gallery_product {
    position: relative;
      top:0;
      left: 0;
  }
  
  .gallery-image {
    display: block;
    width: 100%;
    height: auto;
  }
  
  .gallery_product {
      margin-bottom: 30px;}
  
  .overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right:  0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: #121212;
  }
  
  .gallery_product:hover .overlay {
    opacity: 1;
  }
  
  .text {
    color: white;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  </code></pre>
  
  <p>the <code>padding: 0 !important</code>, will simply just remove the spaces between the tiles. I still want to keep the spaces between the tiles, but keep the overlay WITHIN the tiles. I tried this: </p>
  
  <pre><code>&lt;!-- fine art--&gt;
      &lt;div class="col-md-4 col-sm-6 col-xs-12"&gt;
      &lt;div class="gallery_product filter fine-art"&gt;
      &lt;a href="images/fine art photography/image-1.jpg" data-lightbox="gallery" data-image-alt="Image 1"&gt; &lt;img src="images/fine art photography/image-1.jpg" alt="Alt Text" class="gallery-image" /&gt;
          &lt;div class="overlay"&gt;
            &lt;div class="text"&gt;Hello World&lt;/div&gt;
          &lt;/div&gt;
          &lt;/a&gt; &lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>and it gives me what I want, but then my <code>data-lightbox</code> will not work, the next and previous button becomes disabled. So essentially, I want the first code, but remove the extra sides of the <code>overlay</code> div. Is anyone able to help? Thank you so much!!</p>