<div class="first"></div>
<div class="second"></div>

body {
  display: flex;
  justify-content: center;
  padding-top: 20px;
}

.first {
  background-color: red;
  width: 300px;
  height: 150px;
  cursor: pointer;
}

.second {
  width: 300px;
  height: 150px;
  background-color: yellow;
  position: absolute;
  z-index: -1;
}

.first:hover {
  position: relative;
  animation: UpLeft 0.5s ease-in-out forwards;
}

@keyframes UpLeft {
    from {
        bottom: 0px;
        right: 0px;
    }
    to {
        bottom: 10px;
        right: 10px;
    }
}