<div class="element">
  <h5 class="element__text">Hello World</h5>
  <div class="element__ball"></div>
</div>
.element {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
}

.element:hover .element__ball {
  transform: translate3d(0px, -120px, 0px);
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
}

.element__text {
  font-size: calc(8vw + 20px);
  color: #fff;
  font-family: "Oswald", sans-serif;
  transition: color 0.75s ease-in-out;
}

.element__text:hover {
  color: crimson;
}

.element__ball {
  position: absolute;
  top: 0;
  transform: translate3d(0px, -1000px, 0px);
  right: 20px;
  width: 100px;
  height: 100px;
  background: crimson;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: transform 0.75s, opacity 0.75s, visibility 0.75s;
  transition-timing-function: ease-in-out;
}

External CSS

  1. https://moonpresence.site/moonpresence/foundation/css/base.css

External JavaScript

This Pen doesn't use any external JavaScript resources.