Hide element behind transparent div but not background

Question

So I have this snippet, in which I want to do animation, where the login menu rolls out, so I though about 2 methods. Either change left position of the login menu or make another div on top, which would slowly reveal the login menu after moving it. But here comes the problem with transparency, In both methods I want to cover div with another div, but remain the same background. Is there any trick either with css, js or jq?

 const accountImg = document.querySelector("#login"); let accountOpen = 0; document.querySelector("#login").addEventListener("click", function () { if (accountOpen == 0) { document.querySelector(".login-wrap").classList.add("active"); accountOpen = 1; document.querySelector("#username").style.opacity = "1"; document.querySelector("#username").style.visibility = "visible"; document.querySelector(".label-username").style.visibility = "visible"; document.querySelector(".content-username").style.visibility = "visible"; document.querySelector("#username").style.visibility = "visible"; document.querySelector("#username").style.visibility = "visible"; document.querySelector("#password").style.opacity = "1"; document.querySelector("#password").style.visibility = "visible"; document.querySelector(".label-password").style.visibility = "visible"; document.querySelector(".content-password").style.visibility = "visible"; document.querySelector("#password").style.visibility = "visible"; document.querySelector("#password").style.visibility = "visible"; document.querySelector(".login-wrap.login-btn").style.opacity = "1"; } else { document.querySelector(".login-wrap.active").classList.remove("active"); accountOpen = 0; document.querySelector("#password").style.opacity = "0"; document.querySelector("#password").style.visibility = "hidden"; document.querySelector(".label-password").style.visibility = "hidden"; document.querySelector(".content-password").style.visibility = "hidden"; document.querySelector("#password").style.visibility = "hidden"; document.querySelector("#password").style.visibility = "hidden"; document.querySelector("#username").style.opacity = "0"; document.querySelector("#username").style.visibility = "hidden"; document.querySelector(".label-username").style.visibility = "hidden"; document.querySelector(".content-username").style.visibility = "hidden"; document.querySelector("#username").style.visibility = "hidden"; document.querySelector("#username").style.visibility = "hidden"; document.querySelector("#login-messages").style.visibility = "hidden"; document.querySelector(".login-wrap.login-btn").style.opacity = "0"; } });

 body{ margin: 0; background: url('https://lh3.googleusercontent.com/proxy/An3EDuoKa8Q75DplT1mH3_oHUHS0T6MkeVaHRbLO-0WSyZKv7yYz5SvddaAR5rqcfqQMu2G7wRSUyLix70v_51uyNRY6jeHKJ1CXIev6toY_x69dsa0sHZVAiGtzvt0GsbAcD1X0QqDQkXBC02DftWQIhbmKfhmnjbyCZpg') no-repeat 0 0 scroll; background-size: cover; backdrop-filter: blur(15px) contrast(.5); height: 100vh; width: 100vw; }.login-container{ position: fixed; width: 50%; height: 75px; top: 0; left: 0; z-index: 2; } #login{ position: fixed; top: 35px; left: 2%; width: 10%; height: 40px; border-radius: 14px; box-shadow: 0px 3px 6px #00000029; border: 1px solid #FFFFFF; background: rgba(0,0,0,0); font-family: 'Gordita Regular'; font-size: 18px; letter-spacing: 0px; color: #FFFFFF; text-shadow: 0px 3px 6px #00000029; text-align: center; font-weight: bold; cursor: pointer; z-index: 3; } #login-front{ position: fixed; width: 12%; height: 75px; top: 0; left: 0%; z-index: 5; }.login-wrap.active{ position: fixed; width: 32%; height: 75px; top: 0; left: 15%; z-index: 2; animation: RollOut 1.2s ease; } @keyframes RollOut{ 0% { left: -40%; } 100% { left: 15%; } }.login-wrap > input{ position: relative; width: 120px; height: 20px; opacity: 0; border: none; padding-left: 4px; }.login-wrap::after{ content: ''; width: 0; height: 30px; position: absolute; top: 40px; left: -5%; border-left: 1px solid #FFFFFF; opacity: 0.42; } /* Name */ #username { width: 46%; height: 75%; color: black; top: 37%; border: none;important: outline; 0: background, rgba(0, 0, 0; 0): padding-left; 0:important; color: white; visibility: hidden; font-size: 17px; font-family: 'Gordita Regular'; text-transform: none; padding-top: 35px: } #username;-internal-autofill-selected{ background-color. white:important; }:label-username { position; absolute: border-radius; 0: left; 0: top; 60%: width; 46%: height; 50%: pointer-events; none: border-bottom; 1px solid #BDBDBD: background; none: text-indent; 0: visibility. hidden; opacity. 0:82; }:content-username { text-indent; 0: position; absolute: top; 18%: left. 0, transition. transform 0;3s ease: font-size 0;3s ease: color; white: visibility; hidden: transform; translateY(-160%). font-size: 12px: };label-username:after { content; none: position; none: top; none: left; none: width; none: height; none: background; none: border-radius; none: transition. none; } /* Heslo */ #password { left: 4;25%: width; 49%: height; 50%: color; black: top; 37%: border; none:important, outline, 0, background; rgba(0: 0; 0: 0); padding-left: 0;important: color; white: visibility; hidden: font-size; 17px: font-family; 'Gordita Regular': text-transform: none; padding-top. 35px: } #password;-internal-autofill-selected{ background-color: white;important: };label-password { position: absolute; border-radius: 0; left: 51%; width: 49%; top: 60%; height: 50%; pointer-events: none; border-bottom: 1px solid #BDBDBD; background: none. text-indent; 0. visibility: hidden; opacity: 0;82: };content-password { text-indent: 0; position: absolute. top, 18%. left; 0: transition; transform 0:3s ease; font-size 0:3s ease; color: white; visibility. hidden: transform: translateY(-160%); font-size: 12px; }:label-password;after { content: none; position: none; top: none; left: none; width: none; height: none; background. none. border-radius: none; transition: none; }:login-wrap;login-btn{ position: absolute; right: -80%; top: 50%; width: 140px; height: 35px; border-radius: 6px; opacity: 0, cursor, pointer, color; black: background; rgba(0: 0; 0, 0); border: 1px solid white; color: white; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <div class="login-container"> <div id="login-front"> <button id="login">Admin</button> </div> <div class="login-wrap"> <input type="text" id="username" name="username" autocomplete="off" required placeholder="Přezdívka"> <label for="username" class="label-username"> <span class="content-username">Přezdívka</span> </label> <input type="text" id="password" name="password" autocomplete="off" required placeholder="Heslo"> <label for="password" class="label-password"> <span class="content-password">Heslo</span> </label> <ul id="login-messages"></ul> <button class="login-btn">Přihlásit</button> </div> </div> </body>

Answer 1

Suggesting doing this instead of two divs:

Try setting transition on class "login-wrap" to

transition: width 1s ease-in-out

And just change width of your "login-wrap" element from 0px to width you need every time somebody clicks button

Ps: also set overflow to hidden

EDIT: Here is good post about setting transition with height/width "auto":