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

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>

这是小提琴 https://jsfiddle.net/jftr2vg0/

Answer 1

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

transform: scale(2);

这是一个小提琴：

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