HTML/CSS - Изображения, перекрывающиеся друг с другом только с одной стороны с преобразованием

Question

пока я создавал сайт, я вступил во что-то неожиданное.

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

Как вы можете видеть, после того, как изображение расширится, он возвращается в исходном размере, но ДИВ после прыжков над ним. Я пробовал все, что мог придумать, но ничего не получилось. Есть ли способ предотвратить это?

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

Это работает для меня в Chrome: https://jsfiddle.net/m9qgxeke/8/

Хитрость заключается в том, чтобы сделать переход на Z-индекс-свойство, которое начинается после 0,2 секунды (когда изображение на место):

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

Но это относится к «инверсию переход "(меньшее изображение на большее изображение), что нам не нужно, поэтому нам нужно отключить переход z-index для« in-перехода »с помощью активного псевдоселектора:

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

Код сокращен для ясности.

Редактировать: решение bumpys является гораздо более простым и рекомендуемым, мой подход также работает для position: relative -элементов, если это требование (которое я не подозреваю для простых изображений).

Answer 2

Просто удалите position: relative; из .transition img