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

Question

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

如您所见，图像将其 returns 扩展为原始大小，但 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-属性上进行转换（当图像回到原位时）：

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

但这也适用于 "in-transition"（小图到大图），我们不希望这样，所以我们必须禁用 [=28= 的 z-index-transition ] 使用主动伪选择器：

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

为清楚起见，代码已缩短。

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

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

HTML/CSS - Images overlapping each other only on one side with transform

html

css

css-transitions

css-transforms