CODEWITHSUNDEEP
javascripthtmlcss
xander17
xander17

Reputation: 141

Transparent element on top of visible element

Is there a way to make a transparent element appear on top of a visible element? I want NAV2 that is transparent to be on top of the yellow square like NAV1 does despite being transparent.I need the nav to be transparent and the square that appears when you click on the button to go beneath it.

Thank you!

Here is the code:

buttons = document.querySelectorAll('button');
elements = document.querySelectorAll('.element');


buttons.forEach((button, i) => {
button.addEventListener('click', function() {
  elements[i].classList.add('animate-element');
})
});

elements.forEach(element => element.addEventListener('animationend', function() {
   element.classList.remove('animate-element');
}))
.nav1, .nav2 {
  position: relative;
  width: 100vw;
  height: 20vh;
  color: white;
}

.nav1 {
  background: red;
}

.nav2 {
  border: 2px solid black;
}

button {
  margin-top: 10px;
}

.button1 {
  margin-bottom: 120px;
}

.element1, .element2 {
  position: absolute;
  width: 100px;
  height: 80px;
  background: yellow;
  bottom: -105%;
  right: 5%;
  opacity: 0;
  z-index: -1;
}

.animate-element {
  animation: animate 1.2s ease forwards;
}

@keyframes animate {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  
    35% {
    transform: scale(1);
    opacity: 1;
  }
  
  70% {
    transform: scale(1);
    opacity: 1;
  }
  
    100% {
    transform: scale(1) translateY(-140%);
    opacity: 1;
  } 
}
<div class="nav1">
  <div class="element1 element"></div>
  NAV1
</div>
<button class="button1">Button1</button>

<div class="nav2">
   NAV2
  <div class="element2 element"></div>
</div>
<button class="button1">Button2</button>

Upvotes: 1

Views: 131

Answers (1)

Julius Babies
Julius Babies

Reputation: 1861

Do you want to see the page Background? This is not possible. But you can use z-index: n; to move your transparent Element n layers above the others. You can't see this but it's above.

Upvotes: 1

Related Questions