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

Question

当用户将鼠标悬停在 div 上时，我试图让 div 向上移动。

我可以让 div 变大，但是动画是向下发生的。我试图保持 div 的底部保持在同一个位置，并有一个平滑的动画，向上增加 div 的大小。

See jsfiddle here which 演示了我的代码当前正在做什么。

请看下面的代码：

.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。我还放了一个 margin-top: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>

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>

Answer 3

如果你只想使用 css，只需使用：

.content:hover {
  margin-top: -50px;
  height: 110%;
}

见jsFiddle

Answer 4

由于顶部没有任何空间可以展开，你可以先给一个额外的边距，然后像这样在悬停时将其删除 JsFiddle -

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

}

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

.content:hover {
  height: 110%;
  margin-top:0;
}

Answer 5

将top属性设置为height - 100 * -1

https://jsfiddle.net/x3cL1cpt/7/

.content:hover {
  height: 110%;
  top: -10%;
  position: relative;
}

为什么要相对定位？这是因为我移动了盒子，但没有修改盒子占用的空间。如果您需要修改该空间，请将top 更改为margin-top。

Answer 6

用你当前的CSS替换这个CSS，需要添加transition：

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

.content {
    background-color: #e3e4e6;
    height: 100%;
    text-align: center;
    transition: 1s all ease;

}

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