bootstrap: hover overlay (via css) is bigger than image

Question

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:

<div class="container">
  <div class="row">
    <div align="center" class="filter-categories">
      <button class="btn btn-default filter-button" data-filter="all">all</button>
      <button class="btn btn-default filter-button" data-filter="fine-art">fine art</button>
      <button class="btn btn-default filter-button" data-filter="actor-portraits">portraits</button>
      <button class="btn btn-default filter-button" data-filter="landscape">landscape</button>
      <button class="btn btn-default filter-button" data-filter="street">street</button>
    </div>
  </div>
  <br/>
  <div class="row" align="center">
    <!-- fine art-->
    <div class="gallery_product filter fine-art col-md-4 col-sm-6 col-xs-12">
    <a href="images/fine art photography/image-1.jpg" data-lightbox="gallery" data-image-alt="Image 1"> <img src="images/fine art photography/image-1.jpg" alt="Alt Text" class="gallery-image" />
        <div class="overlay">
          <div class="text">Hello World</div>
        </div>
        </a> </div>

    ...

so that when <!-- fine art--> is clicked, it shows up as a lightbox, and arrows will appear to navigate to the next image. For overlay, on hover over the image thumbnail, a black box with text is supposed to show up, but it takes on an extra 15px on the left and right from col-md-4 col-sm-6 col-xs-12, for some weird reason. below is the CSS for the section

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

the padding: 0 !important, 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:

<!-- fine art-->
    <div class="col-md-4 col-sm-6 col-xs-12">
    <div class="gallery_product filter fine-art">
    <a href="images/fine art photography/image-1.jpg" data-lightbox="gallery" data-image-alt="Image 1"> <img src="images/fine art photography/image-1.jpg" alt="Alt Text" class="gallery-image" />
        <div class="overlay">
          <div class="text">Hello World</div>
        </div>
        </a> </div></div>

and it gives me what I want, but then my data-lightbox will not work, the next and previous button becomes disabled. So essentially, I want the first code, but remove the extra sides of the overlay div. Is anyone able to help? Thank you so much!!

Answer 1

This is the shortest solution.

Change this:

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right:  0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #121212;
}

to this:

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 15px;
  right:  15px;
  /* height: 100% */;
  /* width: 100% */;
  opacity: 0;
  transition: .5s ease;
  background-color: #121212;
}