Animate a div from bottom to top with css - html

Question

I need to animate a div going from bottom to top.
This is the situation:
I have a thumbnail that includes the title and description of a movie inside of it. I want to hide the description and only show it when the user hovers the mouse on it.
I tried resizing the height of the container but you can't animate it when the value is set to "auto", and i can't provide an specific size for it because the title may vary for each movie.
And as a lot of you may know, you can't animate from bottom to top using the "bottom" and "top" properties.
This is the html:
<div class="thumbnail-component">
<img class="thumbnail-component__background" src="background.jpg" alt="">
<div class="thumbnail-component__gradient"></div>
<div class="text">
<div class="text__content">
<p class="text__title">The movie title</p>
<div class="text__separator"></div>
<p class="text__description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p class="text__author">Published by Author</p>
</div>
</div>
And here is an image of what i'm trying to accomplish:
I'm honestly completely lost, i think i tried everything i know.
Sorry for my not too great english.

Answer 1

Show Card description on Card hover
Completely flexible and responsive
No hard-coded or arbitrary heights, no JS involved.
Basically,
translateY the title to -100%, on hover animate to 0
Wrap both title and content into a DIV (i.e: .anim)
translateY .anim to +100%, and on hover animate it to 0
Open the example in full page to see what happens and how it works:
/*QuickReset*/*{margin:0;box-sizing:border-box;}
.thumb {
width: 140px;
background: #eee;
}
.anim {
transition: 0.5s;
transform: translateY(100%);
}
.title {
color: red;
transition: 0.5s;
transform: translateY(-100%);
}
.author {
color: blue;
}
/* ANIMATE */
.thumb:hover .anim,
.thumb:hover .title {
transform: translateY(0);
}
<div class="thumb">
<div class="anim">
<div class="title">The movie even longer title</div>
<div class="description">
Text lenghts of Title and Author or even Description do not matter. They will all perfectly accommodate into .thumb on hover
</div>
</div>
<div class="author">Published by super long some Author</div>
</div>
Flexbox Grid!
The real-case proof of concept example:
/*QuickReset*/
* {
margin: 0;
box-sizing: border-box;
}
html {
height: 100%
}
body {
min-height: 100%;
font: 14px/1.4 sans-serif;
}
.grid-3 {
display: flex;
flex-flow: row wrap;
}
.thumb {
display: flex;
flex-flow: column nowrap;
position: relative;
overflow: hidden;
width: 33.333%;
color: #fff;
}
.thumb-gradient,
.thumb-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.thumb-gradient {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.24) 0%, rgba(0, 0, 0, 0.56) 100%);
}
.thumb-anim {
margin-top: auto; /* pushes all content to bottom */
position: relative;
transition: 0.5s;
transform: translateY(100%);
}
.thumb-title {
text-transform: uppercase;
padding: 20px;
transition: 0.5s;
transform: translateY(-100%);
}
.thumb-description {
padding: 10px 20px;
transition: 0.5s;
opacity: 0;
flex: 1;
}
.thumb-author {
padding: 20px;
position: relative;
}
/* ANIMATE */
.thumb:hover .thumb-anim {
transform: translateY(0);
}
.thumb:hover .thumb-title {
transform: translateY(0%);
}
.thumb:hover .thumb-description {
opacity: 1;
}
<div class="grid-3">
<div class="thumb">
<img class="thumb-img" src="http://placekitten.com/300/300" alt="Catz!">
<div class="thumb-gradient"></div>
<div class="thumb-anim">
<h3 class="thumb-title">The movie title</h3>
<p class="thumb-description">
Text lenghts of Title and Author or even Description do not matter. They will all perfectly accommodate into .thumb on hover
</p>
</div>
<div class="thumb-author">Published by super long some Author</div>
</div>
<div class="thumb">
<img class="thumb-img" src="http://placekitten.com/400/300" alt="Catz!">
<div class="thumb-gradient"></div>
<div class="thumb-anim">
<h3 class="thumb-title">The movie title</h3>
<p class="thumb-description">
The row heights are dictated by the tallest in the horizontal group
</p>
</div>
<div class="thumb-author">Published</div>
</div>
<div class="thumb">
<img class="thumb-img" src="http://placekitten.com/230/300" alt="Catz!">
<div class="thumb-gradient"></div>
<div class="thumb-anim">
<h3 class="thumb-title">The movie title a super long title here</h3>
<p class="thumb-description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus facilis beatae, numquam aliquam eveniet. Iure porro provident itaque hic quae tempora. Quaerat doloribus dolore facilis similique, soluta asperiores quas sapiente.
</p>
</div>
<div class="thumb-author">Published by super long some Author</div>
</div>
<div class="thumb">
<img class="thumb-img" src="http://placekitten.com/270/300" alt="Catz!">
<div class="thumb-gradient"></div>
<div class="thumb-anim">
<h3 class="thumb-title">The movie title</h3>
<p class="thumb-description">
Text lenghts of Title and Author or even Description do not matter. They will all perfectly accommodate into .thumb on hover
</p>
</div>
<div class="thumb-author">Published by super long some Author</div>
</div>
<div class="thumb">
<img class="thumb-img" src="http://placekitten.com/250/370" alt="Catz!">
<div class="thumb-gradient"></div>
<div class="thumb-anim">
<h3 class="thumb-title">The movie title</h3>
<p class="thumb-description">
Text lenghts of Title and Author or even Description do not matter. They will all perfectly accommodate into .thumb on hover
</p>
</div>
<div class="thumb-author">Yep. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate sequi aspernatur cumque saepe incidunt enim, nihil dolores ipsam numquam architecto velit labore quod laboriosam aliquam distinctio tempora unde ad totam.</div>
</div>
<div class="thumb">
<img class="thumb-img" src="http://placekitten.com/290/340" alt="Catz!">
<div class="thumb-gradient"></div>
<div class="thumb-anim">
<h3 class="thumb-title">The movie title</h3>
<p class="thumb-description">
Text lenghts of Title and Author or even Description do not matter. They will all perfectly accommodate into .thumb on hover
</p>
</div>
<div class="thumb-author">Published by super long some Author</div>
</div>
</div>

Answer 2

Pretty easy with CSS transform...
.thumbnail-component {
width: 240px;
border: 1px solid red;
overflow: hidden;
cursor: pointer;
}
.thumbnail-component .text {
display: inline-block;
position: relative;
text-align: center;
transform: translateY(70%);
transition: all 1s ease;
}
.thumbnail-component:hover .text {
transform: translateY(0%);
}
<div class="thumbnail-component">
<img class="thumbnail-component__background" src="background.jpg" alt="">
<div class="thumbnail-component__gradient"></div>
<div class="text">
<div class="text__content">
<p class="text__title">The movie author</p>
<div class="text__separator"></div>
<p class="text__description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p class="text__author">Published by Author</p>
</div>
</div>
</div>

Answer 3

You can transition on the flex property, which could be useful here. To reveal the description during the hover, I set its opacity to 0 and position it absolutely safely inside its relative parent container. Finally, I removed the text__separator div because it wasn't useful to be as a flex child.
.text__content {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.text__content__top {
position: relative;
margin-top: auto;
transition: 0.5s flex ease-in-out;
}
.text__description {
position: absolute;
opacity: 0;
transition: 0.4s opacity ease-in-out 0.1s;
}
.text__title {
border-bottom: 2px solid red;
}
.thumbnail-component:hover .text__content__top {
flex: 1;
}
.thumbnail-component:hover .text__content__top > * {
pointer-events: none;
}
.thumbnail-component:hover .text__description {
opacity: 1;
}
<div class="thumbnail-component">
<div class="text">
<div class="text__content">
<div class="text__content__top">
<p class="text__title">The movie title</p>
<p class="text__description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="text__content__bottom">
<p class="text__author">Published by Author</p>
</div>
</div>
</div>
</div>
jsFiddle