Bootstrap - 我需要在鼠标悬停时缩放图像，但保持其原始大小

Question

我正在尝试使用带有一些填充的图像创建一个引导网格，这些图像在悬停时会放大。问题是，即使在我将溢出设置为“隐藏”之后，它们仍然会阻塞我设置的填充线 - 填充设置在同一个元素中，并且由于某种原因它们会覆盖它。例如，当我将鼠标悬停在左侧图像上时，它会变大一点，并挡住中间的垂直白线。如何强制 css 尊重填充？

我的html

   <div class="row" style="height:100%">
 <div class="col-md-6 img-hover" style="padding-right:3px;height:100%;overflow:hidden;">
        <img class="img-responsive" src="Images/image.jpg")" style="overflow: hidden" />
        </div>
        <div class="col-md-6" style="overflow:hidden;height:100%; padding-right: 3px;">
            <div class="row">
                <img class="img-responsive" src="/Images/image2.jpg")" />
            </div>
            <div class="row" style="padding-top:3px;height:100%">
                <div class="col-md-6" style="padding-left: 0px;  padding-right: 3px">
                    <img class="img-responsive" src="/Images/image3.jpg")" />
                </div>
                <div class="col-md-6" style="padding-left: 0px;  padding-right: 3px">
                    <img class="img-responsive" src="/Images/image3.jpg")" />
                </div>
            </div>
        </div>
    </div>

我的 CSS：

.img-hover img {
    -webkit-transition: all .3s ease; /* Safari and Chrome */
    -moz-transition: all .3s ease; /* Firefox */
    -o-transition: all .3s ease; /* IE 9 */
    -ms-transition: all .3s ease; /* Opera */
    transition: all .3s ease;
    overflow:hidden;
}

.img-hover img:hover {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform:translateZ(0) scale(1.20); /* Safari and Chrome */
    -moz-transform:scale(1.10); /* Firefox */
    -ms-transform:scale(1.10); /* IE 9 */
    -o-transform:translatZ(0) scale(1.10); /* Opera */
    transform:translatZ(0) scale(1.10);
}

这就是我拥有的图像。我应该做些什么改变以使缩放的图像停止阻塞填充线？非常感谢。

Answer 1

您可以在包含<img> 的<div> 块上使用overflow: hidden 属性。在:hover 上使用transform: scale(x) 属性。

看看下面的sn-p：

.grid-box {
  display: flex;
  flex-direction: column;
}

.first-row {
  display: flex;
}

.grid {
  border: 1px solid #fff;
  overflow: hidden;
  transition: all .3s linear;
}

.one, .two {
  width: 100px;
  height: 100px;
}

.three {
  width: 202px;
  height: 100px;
}

.grid:hover img {
  transform: scale(2);
  transition: all .2s linear;
}

<div class="grid-box">
  <div class="first-row">
    <div class="grid one">
      <img src="http://placehold.it/100x100" alt="" />
    </div>
    <div class="grid two">
      <img src="http://placehold.it/100x100" alt="" />
    </div>
  </div>
  <div class="grid three">
    <img src="http://placehold.it/202x100" alt="" />
  </div>
</div>

希望这会有所帮助！