放大悬停图像重叠问题（CSS 变换：缩放）

Question

我一直在努力创建一个可以显示多个图像的页面，这些图像在悬停时会放大大约 80% 的页面宽度。 为此，根据此处其他问题的答案，我使用了转换：scale ()。 我面临的问题是，这似乎会导致图像在放大时重叠。 我希望实现的是图像在放大时将彼此推到页面下方，而不是上下移动。

请原谅我试图解决这个问题。总体而言，编码对我来说非常陌生。

https://jsfiddle.net/msandford/zjrc7v6s/

.image1 { `display:block;
position: relative;
width: 10%;
left:40%;
height: auto;
transition: 0.4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
z-index:1;
}
.image1:hover {
display:block;
position: relative;
transform: scale(4);
transition: 0.4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
z-index:1;
}
.image2 {
display:block;
position: relative;
width: 10%;
left:40%;
height: auto;
transition: 0.4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
z-index:1;
}
.image2:hover {
display:block;
position: relative;
transform: scale(4);
transition: 0.4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
z-index:1;
}
.image3 {
display:block;
position: relative;
width: 10%;
left:40%;
height: auto;
transition: 0.4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
z-index:1;
}
.image3:hover {
display:block;
position: relative;
transform: scale(4);
transition: 0.4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
z-index:1;
}

提前致谢。

Answer 1

scale() 函数保留了原始元素的边界框，因此不会推动其他图像，我本来可以添加边距（顶部和底部），但随后图像会跳来跳去，所以我选择只使用width property（为什么不呢？你最初的问题是什么导致scale()？）

#scale {
  text-align: center; /* to align all inline content inside the div */
}

#scale img {
  width: 150px;
  transition: 0.4s ease-in-out;
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  -ms-transition: all .4s ease-in-out;
}

#scale img:hover {
  width: 80%;
}

<div id="scale">
  <img src="http://lorempixel.com/output/food-q-c-640-480-10.jpg"><br>
  <img src="http://lorempixel.com/output/food-q-c-640-480-10.jpg"><br>
  <img src="http://lorempixel.com/output/food-q-c-640-480-10.jpg">
</div>

另外我想我应该指出你使用错误的类。

class 是一个字符串，您可以将其应用于所有图像，然后您可以在 css 中执行 .scalethis{} 以一次将其应用于所有图像。

你使用它的方式就像你应该如何使用id