根据高度显示叠加div？

Question

I have an image with a text overlay with a title describing the image. On hover, I want the title text to push up, revealing the description text underneath the title. But, my code doesn't work if the divs that contain the text change in height. For example, when the description text is short, the title text moves up too much, resulting in a gap between the two divs.

So, the title text should move up based on the height of the description div. How do I do that?

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

I came up with this, first I changed your markup a little bit

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

Now you have the title and text in the same div, and then you need to change your css a little bit, I translated the div 100% less the height of the title, transform: translateY(calc(100% - 40px)); and then added a transition

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

Let me know if that what you are looking for! Here you have a codepen.

Answer 2

As I've told you in my comment I would put the .title in the .desc div as a h4 - for example. This would solve your problem. Next come a demo:

 .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

hmm, or maybe could you place title at the top?

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

style:

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

in that case everything looks more correctly, without jumping the title Like here : https://codepen.io/anon/pen/XyMQjO