Why is there a margin/padding?

Why when you run the animation by clicking on the checkbox, it scrolls the text creating some padding/margin on the bottom of the card?https://codepen.io/Bard-the-scripter/pen/vYwjKKo?editors=1100
7 Replies
MarkBoots
MarkBoots2w ago
don't really get what you mean, don't see padding
No description
clevermissfox
clevermissfox2w ago
Is the image display; block.
Bardacoon
Bardacoon2w ago
I meant that when I start the animation, this happens, I dont get why there's that "padding"
No description
MarkBoots
MarkBoots2w ago
i see the grid-template-rows of .overlay-content is transitioning while the content .overlay needs to stay at the end Don't know if you could do something about that. the browser has to do some calculations to keep the content of .overlay at align-content: end;
MarkBoots
MarkBoots2w ago
No description
Bardacoon
Bardacoon2w ago
Yeah you're right, align-content: end was the problem, i dont know why tho. I just changed overlay into using flex and I added margin-top auto to the title, and it works fine
MarkBoots
MarkBoots2w ago
ah great. glad you could solve that