使 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>

原文由 user6002037 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 transform:scaleY() 并将 transform-origin 设置为 bottom 。我还放了一个 margin-top:100px 看效果更好。您也可以使用 transition 使比例更平滑

您还需要缩小文本。

看这里： jsfiddle

您需要在缩放 div 的同时将文本缩放回其原始状态。因此，如果您将 div 缩放 2 次。您需要将文本缩小 ¹⁄₂ ，如果您缩小 3 倍则相同…缩小 ¹⁄₃

在这种情况下，您将 --- 放大 .content 1.5 因此您需要将里面的文本缩小 ¹⁄₁.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>

原文由 Mihai T 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

像这样尝试（我没有其他想法……）：你可以给类“盒子”一个比类“内容”更大的高度（我在周围放了一个红色边框，所以你可以看到它）。之后，您可以使用 flexbox，将“内容”类放在底部。在那之后，你可以用悬停来向上改变你的高度并填充它。通过过渡，您可以制作出漂亮的动画。我希望这已经足够好了。也许目前我还没有想法，jQUery 也有一种方法。让我知道，如果这对你有帮助（我不确定我是否理解这个问题） - 干杯。 （重要：此高度等只是测试的随机值）

 .box {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  height: 100px;
  border: 1px solid red;
}
.content {
  background-color: #e3e4e6;
  height: 50px;
  width: 100%;
  text-align: center;
  -webkit-transition: height 1s;
  /* Safari */
  transition: height 1s;
}
.content:hover {
  height: 100%;
}

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

原文由 webta.st.ic 发布，翻译遵循 CC BY-SA 3.0 许可协议