HTML/CSS - 图像仅在一侧通过变换相互重叠

Question

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

https://jsfiddle.net/m9qgxeke/3/

正如您所见，图像展开后会恢复到原来的大小，但之后的 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

只需从.transition img 中删除position: relative;

Answer 2

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

诀窍是在 0.2 秒后开始的 z-index-property 上进行转换（当图像恢复原位时）：

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

但这也适用于“in-transition”（较小的图像到较大的图像），这是我们不想要的，所以我们必须为“in-transition”禁用 z-index-transition主动伪选择器：

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

为了清楚起见，代码被缩短了。

编辑：bumpys 解决方案更加简单且值得推荐，我的方法也适用于 position: relative-elements，以防这是必需的（我不怀疑简单图像）。