Unable to click and hover on buttons through Overlay

Question

The overlay is used to move the text upwards and reveal buttons but I cannot put hover or click on those buttons because as soon as I go over them the overlay and text comes down making it unable for me to access.

I tried attaching event listeners for mouse enter and leave and maintain a state for it, applying CSS, using pointer-events. I expect that the top element moves above when I hover over the overlay revealing the buttons and then hover or click on buttons to do something. The thing is that it should remain as if it is hovered even if I am hovering on buttons which also have :hover on them and the overlay :hover should only disable when I am outside of entire overlay.

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
}

.container {
  height: 50%;
  width: 50%;
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.overlay {
  position: absolute;
  top: 35%;
  left: 35%;
  background: blue;
  opacity: 0.3;
  height: 40%;
  width: 30%;
  z-index: 1;
}

.element1 {
  color: white;
  font-size: 3rem;
  font-weight: bold;
  transition: transform 1s;
}

.buttonsContainer {
  position: absolute;
  top: 53%;
  left: 45%;
  width: 200px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  opacity: 0;
  transition: opacity 1s;
}

.overlay:hover~.element1 {
  transform: translateY(-100px);
}

.overlay:hover~.buttonsContainer {
  opacity: 1;
  z-index: 3;
}

.btn:hover {
  color: red;
  cursor: pointer;
}

<div class="container">
  <div class="overlay"></div>
  
  <div class="element1">Some texts</div>
  
  <div class="buttonsContainer">
    <button class="btn">b</button>
    <button class="btn">b</button>
    <button class="btn">b</button>
  </div>
</div>

Answer 1

I have found and alternate approach to implement this by modifying a bit of HTML and CSS. Though the CSS is a bit incomplete but the gaol is achieved.

body{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
}

.container{
  height: 50%;
  width: 50%;
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
}
.overlay{
  position: absolute;
  top: 35%;
  left: 35%;
  background: blue;
  opacity: 0.3;
  height: 40%;
  width: 30%;
  z-index: 1;
  text-align: center;
}

.element1{
  color: white;
  font-size: 3rem;
  font-weight: bold;
  transition: transform 1s;
}

.buttonsContainer{
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 0;
  transition: opacity 1s;
}

.overlay:hover ~ .element1{
  transform: translateY(-100px);
}
.overlay:hover > .buttonsContainer{
  opacity: 1;
  z-index: 3;
}
.btn:hover{
  color: red;
  cursor: pointer;
}

<div class="container">
  <div class="overlay">
    <div class="buttonsContainer">
      <button class="btn">b</button>
      <button class="btn">b</button>
      <button class="btn">b</button>
    </div>
  </div>
  <div class="element1">
    Some texts
  </div>
</div>

You can edit the . buttonsContainer CSS according to your requirements. The approach is to move .buttonsContainer inside of the overlay div so that click action is enabled and it still continues to do the overlay effect.