Question

我正在尝试使用带有一些填充的图像创建一个自举网格，这些填充在悬停时放大。问题是，即使我将溢出设置为＆＃34; hidden＆＃34;，它们仍然阻止我设置的填充行 - 填充设置在同一个元素中，并且由于某种原因它们会覆盖它。例如，当我将鼠标悬停在左侧图像上时，它会稍微增长并阻挡中间的垂直白线。如何强制css尊重填充？

我的HTML

＆＃13;

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

＆＃13;

我的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>的{{1}}块上使用overflow: hidden属性。并在<div>上使用<img>属性。

请看下面的代码段：

＆＃13;

:hover

＆＃13;

transform: scale(x)

＆＃13;

希望这有帮助！

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

1 个答案: