Html 悬停时跳转的内容

body {
  background-color: #666e8e;
  margin: 3rem;
}

#testlink {
  text-decoration: none;
}

#testlink:hover .titles {
  color: #3c2301;
  background: linear-gradient(#7bcfd7 25%, #D2B48C 75%);
}

.test {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: auto;
  height: 150px;
  background: linear-gradient(#e97e7e 25%, #3bcee5 75%);
  border-radius: 0% 0% 0% 0% / 0% 0% 0% 0%;
  color: white;
  box-shadow: 20px 20px rgba(0, 0, 0, .15);
  transition: all .8s ease;
  margin: 15px;
}

.test1:hover .description {
  display: block;
  pointer-events: auto;
}

.test:hover {
  border-radius: 0% 0% 90% 90% / 0% 0% 45% 45%;
  box-shadow: 10px 10px rgba(0, 0, 0, .25);
  width: auto;
  height: 450px;
  display: flex;
  justify-content: center;
  align-items: normal;
}

.description {
  display: none;
  position: relative;
  bottom: 400px;
  left: 0;
  width: 90%;
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
  text-align: center;
  pointer-events: none;
}

<div class="test1">
  <a href="https://youtube.com" id="testlink" target="_blank">
    <h1 class="test">Testing Box</h1>
  </a>
  <p class="description">Test description</p>
</div>