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