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
MarkBoots9mo ago
don't really get what you mean, don't see padding
No description
clevermissfox
clevermissfox9mo ago
Is the image display; block.
Bardacoon
BardacoonOP9mo ago
I meant that when I start the animation, this happens, I dont get why there's that "padding"
No description
MarkBoots
MarkBoots9mo 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
MarkBoots9mo ago
No description
Bardacoon
BardacoonOP9mo 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
MarkBoots9mo ago
ah great. glad you could solve that

Did you find this page helpful?