根據高度顯示疊加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