Myujth

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

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.

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>

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