CSS

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

我不确定这是否是您想要实现的理想外观，但请查看此 example

我已经在您的容器中添加了一个 flexbox，更改了您的 transform-origin 并使用适当的边距来保持间距。

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

CSS - 变换 div 推动其他 div

CSS - transform divs pushing other divs around

html

css-transforms