根据高度显示叠加div？

Question

我有一个带有文本覆盖图像的图像，其中标题描述了图像。 在悬停时，我希望标题文本向上推，显示标题下方的描述文本。 但是，如果包含文本的div在高度上发生变化，则我的代码不起作用。 例如，当描述文本很短时，标题文本向上移动太多，导致两个div之间存在间隙。

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

https://codepen.io/tayanderson/pen/qJrmXE

<div class="grid-item" style="background-image: url(https://source.unsplash.com/WLUHO9A_xik/1600x900);">
    <div class="title">
    Caramel Walnut Apple Pie
    </div>
    <div class="desc">
    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">
    Butter Cake
    </div>
    <div class="desc">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
  </div>

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

.grid-item {
  display: inline-block;
  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;
    font-size: 35px;
  }

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

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

Answer 1

我想出了这个，首先我改变了你的标记

<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中有标题和文字，然后你需要稍微改变你的css，我将div翻译成标题高度100％， transform: translateY(calc(100% - 40px)); 然后添加了一个过渡

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

如果您正在寻找的话，请告诉我！ 在这里你有一个codepen。

Answer 2

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

 .grid-item { height: 250px; background-size: cover; width: 250px; position: relative; overflow: hidden; color: #fff; display:inline-block; margin:1em; } .grid-item .desc { position: absolute; bottom: 0; transform: translateY(100%); padding: 5px 20px; transition: transform 1.5s; } .grid-item:hover .desc { transform: translateY(0%); } 

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

Answer 3

嗯，或者你可能把冠军放在顶部？

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

样式：

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

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

  &:hover .title {
    position: relative;
  }
  &:hover .desc {
    transform: translateY(0%);
    position: relative;
     word-break: break-all;
  }

在这种情况下，一切看起来更正确，没有跳过标题像这里： https ： //codepen.io/anon/pen/XyMQjO