<ul class="nav">
  <li>
    <a href="https://jasminegump.com" target = "_blank">
      <i class="fas fa-home fa-3x home">
        <div class = "circle"></div>
      </i>
      <div class = "title">Home</div>
    </a>
  </li>
  
  <li>
    <a href="https://twitter.com/ladyjellington" target = "_blank">
      <i class="fab fa-twitter fa-3x twitter">
        <div class = "circle"></div>
      </i>
      <div class = "title">Twitter</div>
    </a>
  </li>
  
  <li>
    <a href="https://codepen.io/ladyjellington" target = "_blank">
      <i class="fab fa-codepen fa-3x codepen">
        <div class = "circle"></div></i>
      <div class = "title">Codepen</div>
    </a>
  </li>
  
  <li>
    <a href="https://github.com/jasminegmp" target = "_blank">
        <i class="fab fa-github fa-3x github">
          <div class = "circle"></div></i>
        <div class = "title">Github</div>
      </a>
  </li>
  <div class="background"></div>

</ul>

$home: #05386b;
$twitter: #379683;
$codepen: #5cdb95;
$github: #8ee4af;
$background: #edf5e1;
$shadow: #CCCCCC;
$illumination: #fdc6be;

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

body  {  
  background: $background;
  font-family: 'Roboto', sans-serif;
  text-transform:uppercase;
  text-shadow: .5px .5px 0 $shadow;
}

.background {
  position: fixed;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: .75s;
}

.nav{  
  padding: 0px;
  width: 640px;
  margin: 100px auto auto auto;
}

ul{  
  list-style-type: none;
}

li a{ 
  padding: 30px;
  float:left;
  width: 100px;
  text-align:center;
  font-size:15px;
  color: $background;
  text-decoration:none;
}

li a:hover .circle {
  position: relative;
  z-index: 1;
  top: -60px;
  width: 80px;
  height: 80px;
  border-radius: 100%;
  animation: illuminate 2s ease-out infinite;
  background: $illumination;
}

li i{
  height: 50px;
}

li a:hover i {
  transform: translateY(-10px);
}

li a .title{
  font-size:0px;
}

li a:hover .title {
  transform: translateY(10px);
  font-size: 15px;
  transition: .5s;
}
       
li a.title:hover{
  transform: translateY(-10px);
}

.nav li:first-child a {  
  background:$home !important;
}

.nav li:nth-child(2) a {  
  background:$twitter !important;
}

.nav li:nth-child(3) a {  
  background:$codepen !important;
}

.nav li:nth-child(4) a {  
  background:$github !important;
}

.nav li:first-child:hover ~ .background {
  background: $home;
}
.nav li:nth-child(2):hover ~ .background {
  background: $twitter;
}
.nav li:nth-child(3):hover ~ .background {
  background: $codepen;
}

.nav li:nth-child(4):hover ~ .background {
  background: $github;
}

@keyframes illuminate {
  0% {
    transform: scale(.7, .7);
    opacity: 0.7;
  }
  50% {
    opacity: 0.3;
  }
  100%{
    transform: scale(1.15);
    opacity: 0;
  }
}