Почему transform:scale заставляет блок залазить на другой?

Question

[MindStorm]

<article class="pic__wrap">
  <img class="pic__item" src="https://images.unsplash.com/photo-1567103458376-0cf1f3716ca9?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjg4MTMxfQ">
  <div class="pic__footer">Author Name</div>
</article>

.pic__wrap {
  width: 33%;
  overflow: hidden;
}

.pic__item {
  width: 100%;
  object-fit: cover;
  z-index: -1;
}

.pic__footer {
  z-index: 1;
  background: white;
}

.pic__item:hover {
  transform: scale(1.2);
}

Возьмем эту разметку для примера. Объясните, почему при наведении на картинку она заслоняет надпись внизу , не работает z-index и как это исправить (чтобы не нарушались границы img__footer) , не используя дополнительные обертки для картинки? Спасибо!

Answer 1

[Ankhena]

Так вы хотите: https://jsfiddle.net/y9b0mxrL/ ?

Comments

[MindStorm]

спасибо за вариант)
на этом примере можете глянуть? https://jsfiddle.net/sj29wdkr/

[Ankhena]

MindStorm, на том примере тоже самое, если поведение вас устраивает.

Answer 2

[MindStorm]

https://jsfiddle.net/sj29wdkr/ - код