.wrapper {
  position: relative;
  height: 100px;
  width: 100px;
}
.ring { /* produces the front part of the ring */
  position: absolute;
  height: 100%;
  width: 45%;
  left: 27.5%; /* half of 100% - width (to position in center) */
  border: 3px solid;
  border-color: #d5c6de transparent #d5c6de #d5c6de;
  border-radius: 50%;
  transform: rotate(-85deg);
  z-index: 2; /* brings it forward */
}
.ring-behind { /* produces the part that goes behind */
  position: absolute;
  height: 100%;
  width: 45%;
  left: 27.5%; /* half of 100% - width (to position in center) */
  border: 3px solid;
  border-color: transparent #d5c6de transparent transparent;
  border-radius: 50%;
  transform: rotate(-85deg);
  z-index: -1; /* sends it behind */
}
.planet {
  position: absolute;
  height: 75%;
  width: 75%;
  top: 12.5%; /* half of 100% - height (to position in middle) */
  left: 12.5%; /* half of 100% - width (to position in center) */
  border-radius: 50%;
  background-image: url(https://78.media.tumblr.com/ede67d3ab7faa2d5a8a05912b7af5ebd/tumblr_inline_o8f2ylWwhF1tvbhwc_500.gif);
  z-index: 1; /* above the back part of the ring but below the front */
}

.astronaut {
  transition: all 1s;
}
.astronaut:hover {
  height: 240px;
}