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，更改了转换原点，并使用了适当的边距来保持间距。

<record id="action_server_flitrer_mes_rdv" model="ir.actions.server">
    <field name="name">Mes rendez-vous</field>
    <field name="model_id" ref="model_rdv_rdv"/>
    <field name="state">code</field>
    <field name="code">
      action = model.filtrer_les_rdv()
    </field>
</record>

CSS-转换div推动其他div

2 个答案: