<button id="enterModal"><img src="/img/open.png">Войти</button>
<div id="showModal">
  <button id="closeModal">✖</button>
  <a href="/pablic/login.php">Log In</a>
  <a href="/pablic/signup.php">Sign Up</a>
</div>

#enterModal {
  width: 50px;
  height: 50px;
  border: 1px solid red;
}
#showModal {
  width: 300px;
  height: 300px;
  background: rgb(252, 254, 252);
  position: absolute;
  right: -5px;
  top: -5px;
  z-index: 99999;
  box-shadow: 0 0 15px gray;
  border-radius: 10px;
  transform: scale(0);
  transform-origin: top right;
  transition: transform 0.5s, right 0.5s, top 0.5s;
}
#showModal > a {
  display: grid;
  height: 40px;
  width: 90px;
  background: black;
  border-radius: 5px;
  color: white;
  justify-items: center;
  align-items: center;
  margin: 0 auto;
  margin-top: 30px;
}
#closeModal {
  color: red;
  font-size: 18px;
  margin: 10px;
}

document.querySelector("#enterModal").addEventListener("click",show);
document.querySelector("#showModal").addEventListener("mouseleave",hide);
document.querySelector("#closeModal").addEventListener("click",hide);

function show(){
    showModal.style.transform="scale(1)";
    showModal.style.right="130px";
    showModal.style.top="115px";
}
function hide(){
    showModal.style.transform="scale(0)";
    showModal.style.right="-5px";
    showModal.style.top="-5px";
}