<h1>Flexbox Social Media Icon Hover Effects</h1>
<ul>
  <li><a href="#" class="icon-1"><div class="fa fa-twitter"></div><i class="fa fa-twitter"></i></a></li>
  <li><a href="#" class="icon-2"><div class="fa fa-pinterest-p"></div><i class="fa fa-pinterest-p"></i></a></li>
  <li><a href="#" class="icon-3"><div class="fa fa-vk"></div><i class="fa fa-vk"></i></a></li>
  <li><a href="#" class="icon-4"><div class="fa fa-dribbble"></div><i class="fa fa-dribbble"></i></a></li>
  <li><a href="#" class="icon-5"><div class="fa fa-facebook"></div><i class="fa fa-facebook"></i></a></li>
</ul>

*
  transition all .3s, background .2s, color .1s, transform .4s, opacity .8s
  
body
  background #fff
  
h1
  text-align center
  margin 0
  padding 50px 0 0 0
  font-family "Open Sans"
  font-weight 300
  font-size 5vw
  color rgba(#BC232E, .5)

ul
  display flex
  flex-direction row
  list-style none
  padding 0 20px
  align-items center
  height 100vh
  justify-content center
  @media (max-width 850px)
    flex-direction column
  @media (max-height 500px)
    flex-direction row
  
ul li
  min-width 160px
  @media (max-width 600px)
    min-width 70px
  @media (max-width 850px)
    margin-bottom 20px
  
ul li a
  display block
  padding 20px 0
  font-size 24px
  text-align center
  position relative
  &:hover
    color #fff
  &:hover i
    transform scale(5) rotate(360deg)
    opacity 0
    @media (max-width 600px)
      transform scale(4.4) rotate(360deg)
  &:hover div.fa
    transition all 1.5s
    opacity 1
    
    
.icon-1
  color #fff
  background #1DA1F2
  
.icon-2
  color #fff
  background #BC232E
  
.icon-3
  color #fff
  background #597BA0
  
.icon-4
  color #fff
  background #E35A8E
  
.icon-5
  color #fff
  background #3B5998
    
div.fa
  position absolute
  top center
  left center
  opacity 0