<分区>
html - 过渡发生时的图片 CSS
Please check the picture first我在 4 列和 2 行中有 8 张图片，基本上我想要的是以下内容:当将 2 张图片悬停在第一行时，只有 2 张图片应该在过渡时移动到 2 行而不是整行。谢谢!
.primary,
.secondary,
.third,
.fourth,
.fifth,
.sixth,
.seventh,
.eight{
float: left;
width: 300px;
height: 420px;
margin-top: -90px;
margin-left: 60px;
overflow: hidden;
font-size: 0.9em;
text-align: center;
display: block;
border-radius: 10px;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
-webkit-transition: height 2s;
transition: height 2s;
}
.eight:hover,
.seventh:hover,
.sixth:hover,
.fifth:hover,
.fourth:hover,
.third:hover,
.secondary:hover,
.primary:hover {
float: left;
display: block;
height: 550px;
}
最佳答案
由于过渡与高度有关，因此考虑使用向左浮动的列会更容易。只需在每 3 个图像周围放置一个容器，其中的类名为 .col(或您想要为其指定的任何类名)。
同时移除图像的 float 和 display 样式:
.primary,
.secondary,
.third,
.fourth,
.fifth,
.sixth,
.seventh,
.eight{
width: 300px;
height: 420px;
margin-top: -90px;
margin-left: 60px;
overflow: hidden;
font-size: 0.9em;
text-align: center;
border-radius: 10px;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
-webkit-transition: height 2s;
transition: height 2s;
}
.eight:hover,
.seventh:hover,
.sixth:hover,
.fifth:hover,
.fourth:hover,
.third:hover,
.secondary:hover,
.primary:hover {
height: 550px;
}
.col{
height:auto;
position:relative;
border:1px solid blue;
width:33%;
float:left;
}
参见 fiddle :https://jsfiddle.net/wp9uj9o8/5/
关于html - 过渡发生时的图片 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36746725/