Как редактировать положение масштабирования при прокрутке

Question

У меня есть таблица с изображениями и css, которые увеличивают изображение при наведении курсора. Изображения, расположенные ниже линии прокрутки, неправильно масштабируются.

Если убрать position: relative; и position: absolute;, все работает. Но когда изображение увеличено, оно не выходит из таблицы. Мне нужно изображение на go за столом при увеличении.

.zoom {
  position: relative;
  padding: 50px;
  transition: transform .2s; /* Animation */
  margin: 0 auto;
}
	.zoom:hover {
    position: absolute;
    z-index: 10;
  	transform: scale(4); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
	}
  tbody {
    display:block;
    height:500px;
    overflow:auto;
    font-size: 12px;
  }
  thead {
    background-color: rgb(67, 116, 185);
    color: rgb(248, 249, 250);
  }
  thead, tfoot, tbody tr {
      display:table;
      width:100%;
      table-layout:fixed;
      text-align: center;
  }
  p.sub {
    color: gray;
    font-size: 14px;
  }

<table class="table table-bordered table-hover" id="tab_logic">
    <thead>
      <tr>
        <th style="width: 12%">image</th>
        <th style="width: 7%">ok</th>
      </tr>
    </thead>
    <tbody>
        <tr>
          <th style="width: 12%" class="zoom"><img src="https://www.bigstockphoto.com/images/homepage/module-6.jpg" style="width: 100%; height: 80%"/></th>
          <td style="width: 7%"> ff </td>
        </tr>
        <tr>
          <th style="width: 12%" class="zoom"><img src="https://www.bigstockphoto.com/images/homepage/module-6.jpg" style="width: 100%; height: 80%"/></th>
          <td style="width: 7%"> ff </td>
        </tr>
        <tr>
          <th style="width: 12%" class="zoom"><img src="https://www.bigstockphoto.com/images/homepage/module-6.jpg" style="width: 100%; height: 80%"/></th>
          <td style="width: 7%"> ff </td>
        </tr>
        <tr>
          <th style="width: 12%" class="zoom"><img src="https://www.bigstockphoto.com/images/homepage/module-6.jpg" style="width: 100%; height: 80%"/></th>
          <td style="width: 7%"> ff </td>
        </tr>
    </tbody>
</table>

Answer 1

Я думаю, это то, что вы ищете: Ссылка Codepen для решения

Основная проблема заключалась в том, что вы уменьшали масштаб контейнера, который является родительским, а не дочерним, который является изображение.

Изменения, которые я сделал для родительского элемента:

th {
  overflow: hidden;
}

Изменения, которые я сделал для дочернего компонента:

.zoom {
 padding: 50px;
 height: 100%;
 width: 100%;
 transition: transform .5s; /* Animation */
 margin: 0 auto;
}