在容器内的另一个 div 下方显示具有动态高度的 div？

Question

所以，我有一个包含标题和描述的内容框，它们位于 div 的底部。最初，描述是隐藏的。我想要做的是，当您将鼠标悬停在 div 上时，标题应该向上移动并显示具有动态高度的描述。

这是我现在拥有的：https://codepen.io/tayanderson/pen/qJrmXE

问题是，如果描述是 1 行或 3 行，它将无法正确显示。标题 div 应根据描述 div 的大小向上移动。

Here's an example of what I'm trying to do

HTML

<div class="grid-item" style="background-image: url(https://source.unsplash.com/WLUHO9A_xik/1600x900);">
  <div class="title">Title</div>
  <div class="desc">Lorem ipsum dolor sit amet, consectetur</div>
</div>

CSS

.grid-item {
  height:300px;
  background-size: cover;
  width:300px;
  position: relative;
  overflow: hidden;
  color: #fff;

  .title {
     position: absolute;
     left: 0;
     bottom: 0;
     width: 100%;
     padding: 0 20px;
  }

  .desc {
    position: absolute;
    bottom: 0;
    transform: translateY(100%);
    padding: 5px 20px;
 }

  &:hover .title {
    bottom: 30%;
 }
  &:hover .desc {
    transform: translateY(0%);
 }
}

Answer 1

这就是你的意思？

.inner, .inner:hover .grid-item.inner {
  -webkit-transition:all linear 0.2s;
  transition:all linear 0.2s;
}

.inner {
  background: #afa;
  width: 300px;
  overflow: hidden;
  position: absolute;
}

.grid-item:hover .inner{
  margin-top: -100px;
}

<a class="grid-item" href="{{ .Permalink }}" style="background-image: url(images/recipes/{{.Params.image}})">
    <div class="inner"><h3 class="title is-3">{{.Title}}</h3></div>
    <div class="content"><p class="grid-item-blurb">{{.Description}}</p></div>     
</a>

Answer 2

请注意，我颠倒了内部元素的顺序。

.body {
  background: #aaf;
  height: 100px;
  width: 300px;
  overflow: hidden;
}

.inner, .content {
  transition: all linear 0.2s;
}

.content {
  height: 100%;
}

.inner {
  background: #afa;
  transform: translateY(100%);
  top: 100%;
}

.body:hover .inner,
.body:hover .content {
  transform: translateY(-100%);
}

<div class="body">
  <div class="content">
    Blue is a viewport (&lt;body&gt;, visible part of a page), which content should be compressed upon green slide-in
  </div>
  <div class="inner">Green is variable-height text which slides in on viewport hover</div>
</div>