A Pen by Pali Madra.

index.html

<div class="container">
  
  <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
	<div class="flipper">
		<div class="front">
			<!-- front content -->
      <span class="share entypo-export"></span>
		</div>
		<div class="back">
			<!-- back content -->
      <ul>
        <li class="social_square zocial-facebook facebook"></li>
        <li class="social_square zocial-googleplus googleplus"></li>
        <li class="social_square zocial-twitter twitter"></li>
        <li class="social_square zocial-rss rss"></li>
      </ul>
		</div>
	</div>
</div>
  
</div>

Social-board-with-hover-effect.markdown

Social board with hover effect

Another version of a social media hover board with major social media accounts

A Pen by Pali Madra on CodePen.

License.

style.less

//---- Import icons (Entypo, Zocial) We Love Icon Fonts ----//
@import url(http://weloveiconfonts.com/api/?family=entypo|zocial);
/* entypo */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}

/* zocial */
[class*="zocial-"]:before {
  font-family: 'zocial', sans-serif;
}

//---- Main Styles ----//

html, body{
  margin: 0;
  padding: 0;
}
.container{
position: absolute;
left: 50%;
top: 20%;
}

/* entire container, keeps perspective */
.flip-container {
	-webkit-perspective: 1000;
  position: relative;
  left: -50%;

  &:after{
  content: '';
  position: absolute;
  bottom:0;
  left: 0;
  right: 0;
  height: 5px;
 // @include box-shadow(0px 100px 100px 10px #999);
  display: block;
  }
}
	/* flip the pane when hovered */
	.flip-container:hover .flipper, .flip-container.hover .flipper {
	 -webkit-transform: rotateY(180deg);
	}

.flip-container, .front, .back {
	width: 320px;
	height: 320px;
}

/* flip speed goes here */
.flipper {
	-webkit-transition: 0.6s;
	-webkit-transform-style: preserve-3d;

	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	-webkit-backface-visibility: hidden;

	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
  background: #ddd;
  line-height: 320px;
  text-align: center;

  .share{
  font-size: 1.5em;
  text-align: center;
  
  -webkit-transition: 0.6s;
	-webkit-transform-style: preserve-3d;

	position: relative;
  
  @include border-radius(50%);
  }
}

/* back, initially hidden pane */
.back {
	-webkit-transform: rotateY(180deg);
  background: #333;

  ul{
  margin: 0;
  padding: 0;
  }
  li{
  list-style-type: none;
  float: left;
  width: 160px;
  height: 160px;
  line-height: 160px;
  text-align: center;
  color: white;
  font-size: 1.5em;
    
  &.facebook{
    background: #3b5998;
    @include box-shadow(-10px -10px 0px lighten(#3b5998, 20%));
    }
  &.googleplus{
    background:  #dd4b39;
    @include box-shadow(10px -10px 0px lighten(#dd4b39, 20%));
    }
  &.twitter{
    background: #00aced;
    @include box-shadow(-10px 10px 0px lighten(#00aced, 20%));
    }
  &.rss{
    background: #FF9900;
    @include box-shadow(10px 10px 0px lighten(#FF9900, 20%));
    }
  }
}