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

问题描述：

我一直在努力创建一个页面，在该页面上我可以显示多个图像，在悬停时，它将放大约80％的页面宽度。要做到这一点，基于这里的其他问题的答案，我已经使用了变换：scale()。我面临的问题是，这似乎导致放大后图像重叠。我希望实现的是让图像在扩大时相互向下推，而不是越过或越过。放大悬停图像重叠问题（CSS变换：缩放）

请原谅我解决这个问题。一般来说，编码对我而言是非常新颖的。

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; 
}

在此先感谢。

答

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变换：缩放）

相关推荐