Html 根据高度显示叠加div？

我有一张图片，上面有一个描述图片的标题。悬停时，我希望标题文本向上推，显示标题下的描述文本。但是，如果包含文本的div的高度发生变化，我的代码就不起作用。例如，当描述文本较短时，标题文本上移过多，导致两个div之间出现间隙

因此，标题文本应该根据description div的高度向上移动。我该怎么做

---

嗯，或者你能把头衔放在最上面吗

<div class="grid-item" style="background-image: url(https://source.unsplash.com/WLUHO9A_xik/1600x900);">
  <div class="title">
  Short text
  </div>
  <div class="desc">
 ectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
</div>

在这种情况下，一切看起来都更正确，没有跳过标题

---

比如这里：

嗯，或者你能把标题放在最上面吗

<div class="grid-item" style="background-image: url(https://source.unsplash.com/WLUHO9A_xik/1600x900);">
  <div class="title">
  Short text
  </div>
  <div class="desc">
 ectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
</div>

在这种情况下，一切看起来都更正确，没有跳过标题

---

比如这里：

我想到了这个，首先我稍微修改了一下您的标记

<div class="grid-item" style="background-image: url(https://source.unsplash.com/WLUHO9A_xik/1600x900);">
  <div class="title">
    <h1>Test</h1>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quibusdam eius perspiciatis similique, unde impedit esse, temporibus quo.</p>
  </div>
</div>

---

让我知道，如果这是你要找的！您有一个代码笔。

我想到了这个，首先我稍微更改了您的标记

<div class="grid-item" style="background-image: url(https://source.unsplash.com/WLUHO9A_xik/1600x900);">
  <div class="title">
    <h1>Test</h1>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quibusdam eius perspiciatis similique, unde impedit esse, temporibus quo.</p>
  </div>
</div>

---

让我知道，如果这是你要找的！您有一个代码笔。

正如我在评论中告诉您的那样，我将把.title作为h4放在.desc div中-例如。这会解决你的问题。接下来是一个演示：

.表格项目{ 高度：250px； 背景尺寸：封面； 宽度：250px； 位置：相对位置； 溢出：隐藏； 颜色：fff； 显示：内联块； 边缘：1米； } .网格项.描述{ 位置：绝对位置； 底部：0； 转化：转化率100%； 填充：5px20px； 转型：转型1.5s； } .grid项：悬停.desc{ 转化：转化率为0%； } 标题 “同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天 标题 Lorem ipsum door sit amet Lorem ipsum door sit amet Lorem ipsum door sit amet

---

正如我在评论中告诉您的那样，我将把.title作为h4放在.desc div中-例如。这会解决你的问题。接下来是一个演示：

.表格项目{ 高度：250px； 背景尺寸：封面； 宽度：250px； 位置：相对位置； 溢出：隐藏； 颜色：fff； 显示：内联块； 边缘：1米； } .网格项.描述{ 位置：绝对位置； 底部：0； 转化：转化率100%； 填充：5px20px； 转型：转型1.5s； } .grid项：悬停.desc{ 转化：转化率为0%； } 标题 “同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天同一天 标题 Lorem ipsum door sit amet Lorem ipsum door sit amet Lorem ipsum door sit amet

---

我会将.title作为h4放在.desc div中-例如。这将解决您的问题。我将把.title作为h4放在.desc div中-例如。这会解决你的问题。这太完美了！非常感谢！这太完美了！非常感谢！

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

  .title h1 {
    font-size: 35px;
    margin: 0;
    height: 40px;
  }

  .title p {
    margin: 0;
    left: 0;
    right: 0;
    width: 90%;
  }

  .title {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    transform: translateY(calc(100% - 40px));
    transition: all .4s ease-out;
    padding: 0 20px;
  }

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