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

时间:2019-04-16 06:35:51

标签: css

我正在创建一个缩略图效果,用户可以将其悬停在图像上,并在屏幕上放大,将位置设置为绝对,因此其他位置都不会移动,但是在鼠标移开时,所有内容都会变小,因为它会减小尺寸。

.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>

2 个答案:

答案 0 :(得分:2)

考虑改用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>

答案 1 :(得分:1)

.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>