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

Question

我正在尝试创建一个 Bootstrap 网格，其中包含带有一些填充的图像，这些图像在悬停时会放大。问题是，即使在我将溢出设置为“隐藏”之后，它们仍会阻止我设置的填充线 - 填充设置在同一元素中并且出于某种原因它们会覆盖它。例如，当我将鼠标悬停在左侧图像上时，它会变大一点并挡住中间的垂直白线。我怎样才能强制 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

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

看看下面的片段:

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

希望这对您有所帮助!