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>

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>

Answer 2

.thumb_img {
      max-height: 100px;
      max-width: 100px;
      transition: 0.1s;
    }

    .thumb_img:hover {
      max-width: 600px;
      max-height: 600px;
      width: auto;
      height: auto;
      z-index: 9999;
      position: absolute;
    }

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

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

2 个答案: