javascript - 悬停时更改元素的宽度和高度

Question

我有一组相邻的图像。

我正在尝试使用 z-index 在悬停时调整其宽度和高度。尺寸发生变化，它弄乱了附近元素的定位。

问题:有没有办法在不影响附近元素定位的情况下使用 z-index 进行缩放？

.some{
  position:relative;
  width:250px;
  height:250px;
}
.some:hover{
  z-index:10;
  width:500px;
  height:500px;
}

<div>
  <img class="some" src="http://placehold.it/500x500.png">
  <img class="some" src="http://placehold.it/500x500.png">
  <img class="some" src="http://placehold.it/500x500.png">
  <img class="some" src="http://placehold.it/500x500.png">
  <img class="some" src="http://placehold.it/500x500.png">
  <img class="some" src="http://placehold.it/500x500.png">
</div>

这是 fiddle https://jsfiddle.net/jftr2vg0/

Answer 1

与其改变元素的宽度和高度，不如尝试转换它。这应该可以防止它移动周围的元素。

变换:缩放(2);

这是一个 fiddle :

https://jsfiddle.net/5bew5wu5/6/