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

Question

我一直在努力创建一个可以显示多个图像的页面，这些图像在悬停时会放大大约 80% 的页面宽度。为此，根据此处其他问题的答案，我使用了 transform: 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 属性（为什么不呢？导致 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>

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

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

你如何使用它就像你应该如何使用它id

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

Enlarge on hover image overlap issue (CSS Transform: Scale)

css

hover

scaletransform

image-enlarge