CSS - 转换 div 推动其他 div

Question

我正在尝试制作一个带有悬停过渡的缩略图页面，该页面可以缩放并显示描述。编辑：我不想使用jquery。

问题 1.悬停的div 将相邻的div 推离对齐。所有的拇指都应该保持整齐的行。

问题 2.悬停的div 向下推动容器的底部。

.container {
margin-top: 75px;
text-align: center;
border: 2px solid black;
padding: 5px;
}
.tn-wrapper {
display: inline-block;
position: relative;
border: 0;
margin: 5px;
height: 150px;
overflow: hidden;
transition: all 200ms ease-in;
transform: scale(1);
}
.tn-wrapper:hover {
z-index: 1;
transition: all 200ms ease-in;
transform: scale(1.5);
height: 300px;
}
.thumb-box {
background: lightgray;
height: 150px;
width: 150px;
}
.descr-box {
background: gray;
height: 150px;
width: 150px;
}

<div class="container">
<div class="tn-wrapper">
<div class="thumb-box">
Thumb
</div>
<div class="descr-box">
Description
</div>
</div>
<div class="tn-wrapper">
<div class="thumb-box">
Thumb
</div>
<div class="descr-box">
Description
</div>
</div>
</div>

Answer 1

您可以像下面这样更新代码。您可以修复inline-block元素的对齐方式(不是必需的，但要确保它们将保持在顶部(，并调整说明的高度而不是父元素的高度。

.container {
margin-top: 75px;
text-align: center;
border: 2px solid black;
padding: 5px;
}
.tn-wrapper {
display: inline-block;
position: relative;
border: 0;
margin: 5px;
height: 150px;
transition: all 200ms ease-in;
transform: scale(1);
vertical-align:top; /* added */
}
.tn-wrapper:hover {
z-index: 1;
transition: all 200ms ease-in;
transform: scale(1.5);
}
.thumb-box {
background: lightgray;
height: 150px;
width: 150px;
}
.descr-box {
background: gray;
height: 0;
width: 150px;
overflow:hidden;
transition: all 200ms ease-in;
}
.tn-wrapper:hover  .descr-box{
height: 150px;
}

<div class="container">
<div class="tn-wrapper">
<div class="thumb-box">
Thumb
</div>
<div class="descr-box">
Description
</div>
</div>
<div class="tn-wrapper">
<div class="thumb-box">
Thumb
</div>
<div class="descr-box">
Description
</div>
</div>
</div>

Answer 2

我不确定这是否是您想要实现的所需外观，但请查看此示例

我在您的容器中添加了一个弹性框，更改了转换原点，并利用适当的边距来保持间距。

.container {
margin-top: 75px;
text-align: center;
border: 2px solid black;
padding: 5px;
display:flex;
justify-content:center;
}
.tn-wrapper {
display: inline-block;
position: relative;
border: 0;
margin: 5px;
height: 150px;
transition: all 200ms ease-in;
transform: scale(1);
transform-origin:top;
}
.tn-wrapper:hover {
z-index: 1;
transition: all 200ms ease-in;
transform-origin:top;
transform: scale(1.5);
margin:5px 43px 305px 43px;
}