0

我一直在努力创建一个可以显示多个图像的页面，这些图像在悬停时会放大大约 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;
}

提前致谢。

4

1 回答 1

0

该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>

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

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

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

于 2017-08-12T07:48:52.967 回答