CSS Animate Content Bottom to Top - css

Question

I have a div with a title, a description and a button. I want to show the title but hide the description and button until the user hovers over the div.
The problem I am having is that the description is dynamic and the number of lines can be different so you can see some of the content under the title.
.short-description-block {
position: absolute;
z-index: 1;
margin-bottom: 0;
background-color: rgba(93,179,193, .7);
align-items: center;
display: flex;
width: 100%;
transform: translateY(70%); /* push the content down but show the title */
transition: all .5s ease;
bottom: 0;
}
.block-content:hover .short-description-block {
transform: translateY(0%);
}
jsfiddle

Answer 1

What you could do is use the calc() css function to calculate the value in the initial translateY.
What you want is first know the height of the title. The title is an h5 html element that have this styles that impact his height (just use the inspector to get them):
h5 {
font-size: 0.83em;
margin-block-start: 1.67em;
margin-block-end: 1.67em;
}
So the height of the title will be approximatively .8em + (2 * 1.6em).
So now you want to translate .short-description-block so that just the title is visible. That can be done using:
translateY(calc(100% - (.8em + (2 * 1.6em))));
Here is the example:
.main-feature-block {
margin-bottom: 12px;
overflow: hidden;
width: 49.5%;
}
.block-content {
height: 100%;
position: relative;
}
.feature-image {
background-position: center !important;
background-size: cover !important;
padding: 52% 0;
height: 100%;
}
.short-description-block {
position: absolute;
z-index: 1;
margin-bottom: 0;
background-color: rgba(93, 179, 193, .7);
align-items: center;
display: flex;
width: 100%;
transform: translateY(calc(100% - (.8em + (2 * 1.6em))));
transition: all .5s ease;
bottom: 0;
}
.content {
padding: 0px 35px 10px;
}
.main-feature-block .block-content:hover .short-description-block {
transform: translateY(0%);
}
<div class="col-sm-6 main-feature-block">
<div class="block-content">
<div class="feature-image" style="background: url('https://via.placeholder.com/150')"></div>
<div class="short-description-block">
<div class="content">
<h5>Lorem Ipsum</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu lacus euismod, finibus orci ut, interdum velit. Donec sit amet lorem et velit auctor commodo at non purus.</p>
<div class="btn-content">
<a class="c-btn" href="#" target="_self">Learn More</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 main-feature-block">
<div class="block-content">
<div class="feature-image" style="background: url('https://via.placeholder.com/150')"></div>
<div class="short-description-block">
<div class="content">
<h5>Lorem Ipsum</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu lacus euismod, finibus orci ut, interdum velit. Donec sit amet lorem et velit auctor commodo at non purus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu lacus euismod, finibus orci ut, interdum velit. Donec sit amet lorem et velit auctor commodo at non purus.</p>
<div class="btn-content">
<a class="c-btn" href="#" target="_self">Learn More</a>
</div>
</div>
</div>
</div>
</div>