Scaling form parent elements inclusive of its child elements

I’m looking to create a form which has two form inputs being username/ email and password. On focus of either of the input fields I want to scale up all the form elements from and including the parent element. I’ve got the following but it doesn’t seem to work properly for some reason

The HTML:

[code]
<form class=”loginform validate-form” id=”form-userlogin” action=” ” method=”POST” autocomplete=”off”>

<label for=”checkbox-formswitch” class=”formheader-loginsignin” aria-hidden=”true”>
Login
</label>

<div class=”loginsignin-contentview”>
<div class=”userform-loginsignin”>
<div class=”loginform-fieldemail”>
<label class=”lbl_userformentry-email” for=”userentry-formentry-email”> Email * </label>
<div class=”formentry-emailfield validate-input” data-validate = “”>
<input class=”inputfield-formentry” id=”userentry-formentry-email” type=”text” name=”formentry-email” placeholder=””>
<span class=”fieldentry-focus”>

</span>
</div>
</div>

<div class=”loginform-fieldpassword”>
<label class=”lbl_userformentrypassword” for=”userentry-formentrypassword”> Password * </label>
<div class=”formentry-passwordfield validate-input” data-validate = “”>
<input class=”inputfield-formentry” id=”userentry-formentrypassword” type=”password” name=”formentrypassword” placeholder=””>
<span class=”fieldentry-focus”>

</span>
</div>
</div>

<div class=”formassist-remembermeforgotpassword flex-layout setup-layout center-layout”>
<div class=”loginform-fieldrememberme”>
<input class=”assistcheck-rememberme” id=”loginform-rememberme” type=”checkbox” name=”remember-me”>
<label class=”formentry-rememberme” for=”loginform-rememberme”>
Remember me
</label>
</div>

<div>
<a href=”#” class=”assistcheck-forgottenresetpassword”>
Forgot Password?
</a>
</div>
</div>

<div class=”loginform-submit”>

<div class=”loginformsubmission-form-btn”>
<button class=”loginsubmitvalidform-formbtn” type=”submit”>
Login
</button>
</div>
</div>
</div>
</div>
</form>
[/code]

the CSS:

[code]
.loginform {
padding-left: .2em;
padding-right: .2em;
}

.loginsignin-contentview {
padding-left: .4em;
padding-right: .4em;
}

.validate-input {
position: relative;
}

.alert-validate::before {
content: attr(data-validate);
position: absolute;
max-width: 70%;
background-color: #fff;
border: 1px solid #c80000;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
padding: 4px 25px 4px 10px;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
right: 2px;
pointer-events: none;
font-family: Poppins-Regular;
color: #c80000;
font-size: 13px;
line-height: 1.4;
text-align: left;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 0.4s;
-o-transition: opacity 0.4s;
-moz-transition: opacity 0.4s;
transition: opacity 0.4s;
}

.alert-validate::after {
content: “f12a”;
font-family: FontAwesome;
display: block;
position: absolute;
color: #c80000;
font-size: 16px;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
right: 8px;
}

.alert-validate:hover:before {
visibility: visible;
opacity: 1;
}

.formentry-emailfield {
width: 100%;
position: relative;

/* border: 1px solid #000; */
}

.formentry-passwordfield {
width: 100%;
position: relative;
}

/*

.formentry-emailfield,
.formentry-passwordfield {
width: 100%;
position: relative;
}

*/

.inputfield-formentry {
display: block;
background: transparent;
font-family: Poppins-Regular;
font-size: 18px;
color: #666666;
line-height: 1.2;

border: 1px solid #d9d9d9;

-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;

padding: 0 25px;

}

input.inputfield-formentry {
width: 100%;
height: 33px;
}

.fieldentry-focus {
position: absolute;
display: block;
width: calc(100% + 2px);
height: calc(100% + 2px);
top: -1px;
left: -1px;
pointer-events: none;
border: 1px solid #e6e6e6;
visibility: hidden;
opacity: 0;

-webkit-transform: scaleX(0.9085) scaleY(1.3);
-moz-transform: scaleX(0.9085) scaleY(1.3);
-ms-transform: scaleX(0.9085) scaleY(1.3);
-o-transform: scaleX(0.9085) scaleY(1.3);
transform: scaleX(0.9085) scaleY(1.3);
}

.inputfield-formentry:focus + .fieldentry-focus {
visibility: visible;
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}

[/code]

so everything from and including <div class=”userform-loginsignin”> is scaled up X by 1.3 Y by 1.1. I’m not too sure if I’ve approached correctly either. AnyIdea on how to set this up? any pointers/ corrections/ suggestions/ solutions much appreciated

Many Thanks

Also in #CSS _↴