How can I translate a child div from the bottom left to the top left of it's parent without it moving outside of the parent?

Issue

I'm trying to translate a .text-container from the bottom left to the top left of it's parent div on hover. I'm using percentages for the transform: translate(0, -100%);

This works in certain viewport sizes, but in other viewport sizes, the .text-container translates outside of it's parent div. Is there a way to contain the .text-container translation within the parent div?

Current code

<div class = "square-container">

<div class = "text-container">

<h2>Lorem Ipsum</h2>

</div>

</div>

css

.text-container {

position: absolute;

bottom: 0;

left: 20px;

transition: transform 0.4s;

}

.square-container:hover .text-container {

transform: translate(0, -100%);

}

Solution

I think using 'top' instead of transform makes more sense. With transform element is moving up in its own height and not parent, hope this helps.

.square-container {
position: relative; 
height: 200px; 
    
}

.text-container {
    position: absolute;
    bottom: 0;
    left: 20px;
    top: 120px; 
    transition: top 1s; 
}

.square-container:hover .text-container {
    top: 0; 
}

<div class = "square-container">

<div class = "text-container">

<h2>Lorem Ipsum</h2>

</div>

</div>

Answered By - Sarim Ahmed