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>

Does this answer your question? [Hide elements behind transparent DIV but not background](https://stackoverflow.com/questions/38387442/hide-elements-behind-transparent-div-but-not-background) — shreyasm-dev, Aug 22 '20 at 17:05
I tried few things with z-index, but it didn't really work for me, I can still see those elements even when the background has higher z-index. — Jakub Hampl, Aug 22 '20 at 17:24

Ivan-Shafran · Accepted Answer · 2020-08-26T15:19:16.230

3

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

P.s: also set overflow to hidden

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

edited Aug 26 '20 at 15:19

answered Aug 22 '20 at 17:27

Ivan-Shafran

56
3

I just tried it, but there is a problem, that every element starts to roll out from the same spot (with the different speed, but it is irrelevant), so the look of the good effect disappears. – Jakub Hampl Aug 22 '20 at 17:36
Oh wait, it was probably because I was using % as the coordinates, thank you. – Jakub Hampl Aug 22 '20 at 17:41

Hide element behind transparent div but not background

1 Answers1