css - 悬停时图像绝对然后返回相对

Question

我正在创建一个缩略图效果，用户可以将鼠标悬停在图像上，它会在屏幕上放大，将位置设置为绝对，因此没有其他东西会移动，但是在鼠标关闭时，一切都会因为它重新调整大小而变得异常。

.thumb_img {
  position: relative;
  max-height: 100px;
  max-width: 100px;
  transition: 0.1s;
}

.thumb_img:hover {
  position: absolute;
  max-width: 600px;
  max-height: 600px;
  width: auto;
  height: auto;
}

<table>
  <tr>
    <td><img class="thumb_img" src="https://picsum.photos/300/200?image=990"></td>
  </tr>
</table>

标签： css

Answer 1

考虑改用 CSS 转换：

.thumb_img {
  max-height: 100px;
  max-width: 100px;
  transition: 0.1s;
}

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

<table>
  <tr>
    <td><img class="thumb_img" src="https://cdn4.iconfinder.com/data/icons/logos-3/600/React.js_logo-512.png"></td>
  </tr>
</table>