Question

当用户在div上盘旋时，我试图向上设置div。

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

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

请参阅以下代码：

＆＃13;

.box {
  height: 170px;
  padding-bottom: 15px;
  width: 50%;
}

.content {
  background-color: #e3e4e6;
  height: 100%;
  text-align: center;
}

.content:hover {
  height: 110%;
}

＆＃13;

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

＆＃13;

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

代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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替换为您当前的，需要添加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;
}

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

6 个答案: