title: Hide element behind transparent div but not background
body: <p>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?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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";
      }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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 &gt; 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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;body&gt;
  &lt;div class="login-container"&gt;
          &lt;div id="login-front"&gt;
              &lt;button id="login"&gt;Admin&lt;/button&gt;
          &lt;/div&gt;
          &lt;div class="login-wrap"&gt;
                  &lt;input type="text" id="username" name="username" autocomplete="off" required placeholder="Přezdívka"&gt;
                  &lt;label for="username" class="label-username"&gt;
                      &lt;span class="content-username"&gt;Přezdívka&lt;/span&gt;
                  &lt;/label&gt;
                  &lt;input type="text" id="password" name="password" autocomplete="off" required placeholder="Heslo"&gt;
                  &lt;label for="password" class="label-password"&gt;
                      &lt;span class="content-password"&gt;Heslo&lt;/span&gt;
                  &lt;/label&gt;
                  &lt;ul id="login-messages"&gt;&lt;/ul&gt;
                  &lt;button class="login-btn"&gt;Přihlásit&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>