<div class="grid">
  
  <div class="star star-1"></div>
  <div class="star star-2"></div>
  <div class="star star-3"></div>
  <div class="star star-4"></div>
  <div class="star star-5"></div>
  <div class="star star-6"></div>
  <div class="star star-7"></div>
  
  <ul class="letters">
    <li class="default">e</li>
    <li class="default">f</li>
    <li class="default">k</li>
    <li class="default">j</li>
    <li class="default">p</li>
    <li class="default">a</li>
    <li class="default">x</li>
    <li class="default">c</li>
    <li class="default">r</li>
    <li class="default">g</li>
    <li class="green">f</li>
    <li class="default">q</li>
    <li class="blue">s</li>
    <li class="default">a</li>
    <li class="default">i</li>
    <li class="light-green">l</li>
    <li class="green">n</li>
    <li class="light-green">v</li>
    <li class="light-green">y</li>
    <li class="green">n</li>
    <li class="default">m</li>
    <li class="default">h</li>
    <li class="green">t</li>
    <li class="blue">r</li>
    <li class="light-green">d</li>
    <li class="default">x</li>
    <li class="default">o</li>
    <li class="default">h</li>
    <li class="default">p</li>
    <li class="default">a</li>
    <li class="light-green">w</li>
    <li class="default">k</li>
    <li class="default">h</li>
    <li class="yellow">p</li>
    <li class="default">e</li>
    <li class="default">t</li>
    <li class="default">n</li>
    <li class="default">q</li>
    <li class="default">k</li>
    <li class="default">v</li>
    <li class="default">d</li>
    <li class="default">i</li>
  </ul>
  
  <div class="headline">
    Elegant<br/>Letter grid
  </div>
  
</div>

@import url(https://fonts.googleapis.com/css?family=Roboto:100,300);

body {
  padding: 0;
  color: #FFF;
  line-height: 1.4em;
  font-family: Roboto, sans-serif;
  font-size: 14px;
  background: radial-gradient(ellipse at center, #074E69 0%, #083955 100%) fixed no-repeat;
}


.grid {
  width: 850px;
  margin: 100px auto;
  position: relative;
  
  .star {
    border: 3px solid #F5E653;
    border-radius: 10px;
    position: absolute;
    z-index: 1;
    animation: 2s fade infinite alternate;
    
    &.star-1 {
      top: 90px;
      left: -90px;
      animation-delay: .1s;
    }
    &.star-2 {
      top: -60px;
      right: 300px;
      animation-delay: .4s;
    }
    &.star-3 {
      top: 110px;
      right: 190px;
      animation-delay: .7s;
    }
    &.star-4 {
      top: 200px;
      right: 250px;
      animation-delay: .9s;
    }
    &.star-5 {
      top: -30px;
      left: -30px;
      animation-delay: .5s;
    }
    &.star-6 {
      top: 450px;
      left: 100px;
      animation-delay: .2s;
    }
    &.star-7 {
      top: 400px;
      left: 500px;
      animation-delay: .8s;
    }
  }
  
  .letters {
    margin: 0;
    padding: 0;
    display: block;
    width: 490px;
    position: relative;
    z-index: 2;
    
    &:hover li {
      opacity: .3;
      transition-duration: .6s;
    }
    
    li {
      margin: 0 3px 3px 0;
      padding: 0;
      display: block;
      float: left;
      list-style: none;
      width: 65px;
      height: 65px;
      background: rgba(0,0,0,.23);
      text-align: center;
      line-height: 65px;
      font-size: 25px;
      font-weight: 100;
      text-transform: uppercase;
      cursor: pointer;
      transition-duration: .2s;
      //transition-delay: .03s;
      user-select: none;
      box-shadow: inset 0 0 0 0px rgba(0,0,0,.2);
      
      &:hover {
        opacity: 1;
        transition-duration: .1s;
        box-shadow: inset 0 0 0 4px rgba(0,0,0,.2);
      }
      
      &:active {
        transform: scale(.9);
        transition-duration: .1s;
      }
      
      &.full-opacity {
        opacity: 1;
      }
      
      &:nth-child(odd) {
        background: rgba(0,0,0,.2);
      }
      
      &.light-green {
        background: rgba(30, 180, 130, 1);
      }
      &.green {
        background: rgba(0, 255, 200, .5);
      }
      &.blue {
        background: rgba(50, 170, 255, .8);
      }
      &.yellow {
        background: rgba(255,255,50,.7);
      }
    }
  }
  
  .headline {
    font-size: 70px;
    line-height: 1.3em;
    font-weight: 100;
    margin: 0 0 0 540px;
    padding-top: 100px;
  }
}



@keyframes fade {
  to {
    opacity: .2;
    transform: scale(.7);
  }
}

$('.letters li').on('mouseover', function(){
  var item = $(this),
      classes = item.attr('class'),
      siblings = item.siblings('.'+classes);
  
  if(siblings.length > 0) {
    siblings.addClass('full-opacity');
  }
}).on('mouseleave', function() {
  $('.letters li.full-opacity').removeClass('full-opacity');
});