A Pen by Wagner Moschini.

index.html

<div class="hoverme">
  <div class="wrapper">
    <div class="item item-1">
      <img src="http://www.iconsdb.com/icons/preview/white/facebook-l.png" alt="" /></div>
    <div class="item item-2">
      <img src="http://www.iconsdb.com/icons/preview/white/twitter-l.png" alt="" />
    </div>
    <div class="item item-3">
      <img src="http://www.iconsdb.com/icons/preview/white/google-plus-l.png" alt="" />
    </div>
  </div>  
</div>

simple-hover-weeeee.markdown

simple hover weeeee

just a hover idea

A Pen by Wagner Moschini on CodePen.

License.

style.stylus

ease-goo = cubic-bezier(.4,0,.2,1);

body
  background #333
  font-family 'Lobster Two', cursive
  font-style italic



.hoverme
  width 300px
  height 300px
  position absolute
  top 0
  left 0
  right 0
  bottom 0
  margin auto
  background #0ff
  border-radius 50%
  
  &:before
    content "hover me"
    color #eee
    font-size 60px
    text-shadow 2px 2px #4aa
    text-align center
    width 100%
    display block
    margin-top 100px
    transform translate(0,0)
    transition all .6s ease-goo
    opacity 1
    

  &:hover
    
    &:before
      transform translate(0,-50px)
      opacity 0
    
    .wrapper
      opacity 1
      .item

      .item-1
        transform translate(0,0)
      .item-2
        transform translate(0,0)
      .item-3
        transform translate(0,0)
      
  

.wrapper
  width 270px
  height 80px
  display table
  position absolute
  top 0
  left 0
  right 0
  bottom 0
  margin auto
  opacity 0
  transition opacity .5s  ease-goo
  
  
.item
  width 80px
  height 80px
  display block
  float left
  border-radius 50%
  margin 0 5px
  transition all .6s ease-goo

.item-1
  transform translate(0,50px)
  background #3B5998 
.item-2
  transition-delay .05s
  transform translate(0,50px)
  background #00ACED
.item-3
  transition-delay .08s
  transform translate(0,50px)
  background #DD4B39

.item
  img
    margin auto
    position absolute
    top 0
    left 0
    right 0
    bottom 0