I have a login form centered in the middle of the screen with this CSS:
.login-form {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
align-items: center;
padding: 50px 40px;
color: white;
background: rgba(0,0,0,0.8);
border-radius: 10px;
text-align: center;
box-shadow: 0 0.4px 0.4px rgba(128, 128, 128, 0.109),
0 1px 1px rgba(128, 128, 128, 0.155),
0 2.1px 2.1px rgba(128, 128, 128, 0.195),
0 4.4px 4.4px rgba(128, 128, 128, 0.241),
0 12px 12px rgba(128, 128, 128, 0.35);
}
After the user logs in I want to expand the div to 100% to show other content. After the user has pressed the login button the class of the div changes to this CSS:
.full{
width: 100%;
height: 100%;
transition: 2s;
}
It does the job, but the div moves to the top left corner and starts expanding from there. How to make it expand from the middle?