Question

当我创建一个网站时，我遇到了意想不到的事情。

正如您在图像展开后所看到的那样，它会返回原始尺寸，但跳过它后的div。我尝试了我能想到的一切，但没有任何效果。有没有办法防止这种情况发生？

HTML

<div class="img-gr transition">
    <img src="http://lorempixel.com/400/200/city" alt="Placeholder image" class="img-responsive" title="Lavoro 1">
</div>
<div class="img-gr transition">
    <img src="http://lorempixel.com/400/200/city" alt="Placeholder image" class="img-responsive" title="Lavoro 2">
</div>
<div class="img-gr transition">
    <img src="http://lorempixel.com/400/200/city" alt="Placeholder image" class="img-responsive" title="Lavoro 3">
</div>

CSS

.transition img {
    display: block;
    transition: transform .2s ease;
    -moz-transition: transform .2s ease;
    -webkit-transition: transform .2s ease;
    -ms-transition: transform .2s ease;
    -o-transition: transform .2s ease;
    position: relative;
    z-index: 2;
}
.transition img:hover, .transition img:active {
    transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    z-index: 10;
}

Answer 1

只需从position: relative;

中删除.transition img即可

Answer 2

这适用于Chrome：https://jsfiddle.net/m9qgxeke/8/

诀窍是在0.2秒之后（当图像重新到位时）开始的z-index属性上进行转换：

transition: transform .2s ease, z-index 0.2s 0.2s;

但这适用于＆＃34; in-transition＆＃34; （较小的图像到较大的图像）也是我们不想要的，因此我们必须禁用＆＃34;转换中的z-index-transition＆＃34;使用active-pseudo-selector：

.transition img:active { transition: transform .2s ease, z-index 0s; }

为了清晰起见，缩短了代码。

编辑：碰撞解决方案更加简单和推荐，我的方法也适用于position: relative - 元素，以防这是一个要求（我不会怀疑简单的图像）。

HTML / CSS - 图像仅在一侧与变换重叠

2 个答案: