使div更大,并在悬停时向上移动更大的部分

Question

当用户在div上盘旋时,我试图向上动画div.

我能够使div变大,但动画会向下发生.我试图保持div的底部保持在同一个地方,并有一个平滑的动画增加div的大小向上.

请参阅这里的jsfiddle,它演示了我的代码当前正在做什么.

请参阅以下代码:

.box {
  height: 170px;
  padding-bottom: 15px;
  width: 50%;
}

.content {
  background-color: #e3e4e6;
  height: 100%;
  text-align: center;
}

.content:hover {
  height: 110%;
}

<div class="box">
  <div class="content">TEST</div>
</div>

Answer 1

您可以使用transform:scaleY()并设置transform-origin为bottom.我还提出了一个保证金:100px以更好地看到效果.您也可以使用它transition来使比例更平滑

您还需要缩减文本.

看到这里:jsfiddle

您需要在缩放div的同时将文本缩放回原始状态.所以如果你将div缩放2次.您需要缩小1/2的文本,如果缩放3次则相同...缩小1/3

在这种情况下,你放大.content,1.5所以你需要缩小内部文本1/1.5 = 0.66

码:

.box {
  height: 170px;
  padding-bottom: 15px;
  width: 50%;
}

.content {
  background-color: #e3e4e6;
  height: 100%;
  text-align: center;
  margin-top: 300px;
  transition:0.3s;
}

.content:hover p {
  transform: scaleY(0.66)
}

.content:hover {
  transform: scaleY(1.5);
  transform-origin: bottom;
}

<div class="box">
  <div class="content">
    <p>
      TEST
    </p>
  </div>
</div>