Menu Hover Effects1

by elizabethkmathew

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<nav>
  <ul>
    <li class="nav-item">
      <a class="nav-link" href="#">
        <i class="fa fa-mobile fa-2x" aria-hidden="true"></i>
        <span class="nav-title">About Us</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">
        <i class="fa fa-newspaper-o fa-2x" aria-hidden="true"></i>
        <span class="nav-title">News & Events</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">
        <i class="fa fa-key fa-2x" aria-hidden="true"></i>
        <span class="nav-title">Resources</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">
        <i class="fa fa-envelope-o fa-2x" aria-hidden="true"></i>
        <span class="nav-title">Contact</span>
      </a>
    </li>
  </ul>
</nav>

SCSS

.nav-item {
  background-color: #fff;
  list-style-type: none;
  width: 300px;
  position: relative;
  .nav-link {
    text-decoration: none;
    display: inline-block;
    width: 100%;
    &:hover {
      &:after {
        width: 100%;
      }
      .nav-title {
        color: #fff;
        font-weight: 900;
      }
      i {
        transform: rotate(360deg);
      }
    }
    &:after {
      content: "";
      position: absolute;
      width: 70px;
      height: 70px;
      left: 0;
      transition: width 0.6s ease-in-out;
    }
  }
  .link-bg {}
  i {
    width: 70px;
    height: 50px;
    text-align: center;
    color: #fff;
    padding-top: 20px;
    position: relative;
    z-index: 5;
    transition: 0.6s ease-in-out;
  }
  .nav-title {
    padding-left: 5px;
    color: #4C555C;
    font-weight: 700;
    position: relative;
    z-index: 5;
  }
  &:nth-child(1) {
    .nav-link::after {
      background: rgb(158, 145, 200);
    }
  }
  &:nth-child(2) {
    .nav-link::after {
      background: rgb(245, 226, 226);
    }
  }
  &:nth-child(3) {
    .nav-link::after {
      background: rgb(245, 220, 185);
    }
  }
  &:nth-child(4) {
    .nav-link::after {
      background: rgb(212, 239, 215);
    }
  }
}