CodePen

HTML

            
              .chrome
  %h1
    Hover
    %br over
    the
    %br shell
  .shell
    .wrap.one
      .hipchat.item
        %img{:src => "http://i.share.pho.to/50012ffc_o.png"}
    .wrap.two
      .salesforce.item
        %img{:src => "http://i.share.pho.to/6e443647_o.png"}
    .wrap.three
      .mailchimp.item
        %img{:src => "http://i.share.pho.to/764ad3e8_o.png"}
    %img.shell_front{:src => "http://i.share.pho.to/31c5ec1a_o.png"}
  %img.shell_back{:src => "http://i.share.pho.to/a0575eee_o.png"}

            
          
!

CSS

            
              h1 {
  color: #374147;
  font-size: 50px;
  font-family: Helvetica, Arial, sans-serif;
  z-index: 4;
  position: relative;
  left: 30px;
  top: 100px;
  text-transform: uppercase;
  @include opacity(0.1);
}
.shell {
  height: 330px;
  width: 300px;
  padding-left: 20px;
  overflow: hidden;
  position: absolute;
  top: 71px;
  left: 50%;
  margin-left: 62px;
  z-index: 2;
  @media screen and (max-width: 850px){
    margin-left: 12px;
  }
}
.wrap {
  position: relative;
  bottom: -120px;
  left: -20px;
  width: 300px;
  // background: black;
  text-align: right;
  transform-origin: 0 150px;
  -webkit-transform-orign: 0 150px;
  @include transition(all 1s);
  &.one {
    left: 10px;
    bottom: -130px;
  }
  &.two {
    bottom: -104px;
    left: -10px;
  }
  &.three {
    bottom: -88px;
  }
}
.item {
  display: inline-block;
  height: 1px;
  @include transition(transform 1s);
  img {
    height: auto;
    width: 0;
    @include opacity(0);
    @include transition(all 1s);
  }
  &.salesforce img {
    margin-right: 20px;
  }
}
.shell_front {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 259px;
}
.chrome:hover {
  .wrap {
    &.one {
      @include transform(rotate(260deg));
    }
    &.two {
      @include transform(rotate(220deg));
    }
    &.three {
      @include transform(rotate(170deg));
    }
  }
  .item {
    img {
      @include opacity(1);
    }
    &.hipchat {
      @include transform(rotate(-260deg));
      img {
        width: 56px;
      }
    }
    &.salesforce {
      @include transform(rotate(-220deg));
      img {
        width: 80px;
      }      
    }
    &.mailchimp {
      @include transform(rotate(-170deg));
      img {
        width: 59px;
      }
    }
  }
}
.shell_back {
  width: 1200px;
  height: auto;
  position: absolute;
  top: 0px;
  left: 50%;
  margin-left: -600px;
  @media screen and (max-width: 850px){
    margin-left: -650px;
  }
}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................