bootstrap：悬停覆盖（通过css）大于图像答案

【问题标题】：bootstrap: hover overlay (via css) is bigger than imagebootstrap：悬停覆盖（通过css）大于图像
【发布时间】：2018-07-22 18:59:32
【问题描述】：

我是一个非常基础的程序员，所以如果我的问题听起来很愚蠢，请多多包涵。我正在使用 Bootstrap 3 制作某种图库页面，因此顶部有类别过滤器，以及响应式图像行（3 个水平在桌面上，2 个在平板电脑上，1 个在移动设备上）。所以我目前正在使用一个灯箱插件，这样当用户点击缩略图时，它会显示一个灯箱。所以这是 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>

    ...

这样当点击 时，它会显示为一个灯箱，并且会出现箭头以导航到下一个图像。对于overlay，将鼠标悬停在图像缩略图上时，应该会出现一个带有text 的黑框，但由于某些奇怪的原因，它在col-md-4 col-sm-6 col-xs-12 的左右两侧多出了15px。下面是该部分的 CSS

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

padding: 0 !important，只会删除瓷砖之间的空间。我仍然想保留瓷砖之间的空间，但保持瓷砖内的覆盖。我试过这个：

<!-- 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>

它给了我想要的东西，但是我的data-lightbox 将不起作用，下一个和上一个按钮被禁用。所以本质上，我想要第一个代码，但删除overlay div 的多余部分。有人能帮忙吗？非常感谢！！

【问题讨论】：

尝试更改行的左右填充。例如，.row{padding-left:0px;padding-right:0px;}

标签： javascript jquery html css twitter-bootstrap-3

【解决方案1】：

这是最短的解决方案。

改变这个：

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

到这里：

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

【讨论】：