A CodePen by Hugo Darby-Brown. Social-Media Card

index.html

<header>
  <span class="entypo-dot-3 right"></span>
  <div class="social">
    <span class="entypo-facebook"></span>
    <span class="entypo-twitter"></span>
    <span class="entypo-gplus"></span>
    <span class="entypo-tumblr"></span>
  </div>
  
   
  <div class="avatar">
    <img src="http://s.cdpn.io/31787/sheen2.jpeg" alt="" />
    <a href="https://twitter.com/charliesheen"> <h4>@charliesheen</h4></a>
  </div>
  <div class="avatar-frame">
    
  </div>
  
  
    <div class="icon-strip">
   <span class="entypo-user-add"></span>
   <span class="entypo-thumbs-up"></span>
   <span class="entypo-picture"></span>
      
   <span class="entypo-export right"></span>   
  
 </div> 
</header>
<section>
			<div class="twitter-info">
				<ul>
					<li>
						1,608
						<span>Tweets</span>
					</li>
					<li>
						112
						<span>Following</span>
					</li>
					<li>
						9,794,781
						<span>Followers</span>
					</li>
				</ul>
			</div>
</section>

script.js

// this adds a pop up social box

$(".entypo-export").click(function () {
  $(".social").slideToggle("600"); 
});

style.scss

@import "compass";
@import url(http://fonts.googleapis.com/css?family=Pathway+Gothic+One|Roboto+Slab);

*,
*:after,
*:before {
  box-sixing: border-box; 
}

html {
  background: #bdc3c7;
}

[class*="entypo-"]:before { 
  font-family: 'entypo', sans-serif;
  font-size: 2em;
}

body {
  margin: 2em auto;
  width: 35em; 
}

header {
  background: linear-gradient(45deg, rgba(255,255,255,0) 50%, rgba(255,255,255,0.2) 50%) ,url('http://s.cdpn.io/31787/cover.jpg');
  box-shadow: 0 -5px 10px -4px rgba(black,0.4);
  height: 11em;
  position: relative;
  width: 100%; 
}



.avatar { 
  background: rgba(black,0.6);
  border-radius: 50%; 
  box-shadow: 0 0 4px rgba(black,0.4),inset 0 0 4px rgba(black,0.4);
  height: 150px;
  left: 50%;
  margin-left: -75px;
  margin-bottom: -2em;
  overflow: hidden;
  top: 3em;
  position: absolute;
  width: 150px;
  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
  z-index: 4;
  
  &:hover img {
      left: 150px;
      transform: rotate(90deg) translateZ(0);  
    }
    img {
      border-radius: 50%; 
      left: 0;
      position: absolute;
      transition: 1s all ease;
      transform: rotate(0deg) translateZ(0); 
      width: 100%;
      z-index: 4;
    }
    
    h4 {
      color: #fff;
      font-family: 'Roboto Slab', serif;
      font-size: 1.2em;
      font-weight: normal;
      margin: 3em auto 0 0.4em;
      text-align: center;
      width: 80%; 
    }
    
          a {
       text-decoration: none; 
      }
}

.avatar-frame {
  background: white;;
  border-radius: 50%; 
  box-shadow: 0 0 4px rgba(black,0.4),inset 0 0 4px rgba(black,0.4);
  height: 170px;
  left: 50%;
  margin-left: -85px;
  margin-bottom: -2em;
  top: 2.4em;
  position: absolute;
  width: 170px;
  z-index: 3;
}

.entypo-dot-3 {
  color: #ecf0f1;
  cursor: pointer;
  float: right;
  margin: 10px 15px;
  text-shadow: 0 2px 2px rgba(black,0.3);
  transition: 0.3s color ease-in-out;
  
  &:hover {
      color: #89d6ee; 
    }
    
}

.icon-strip {
  background: rgba(black,0.5);
  bottom: 0;
  height: 3.5em;
  position: absolute;
  width: 100%;
  z-index: 2;
  
  
  [class*="entypo-"] {
    @extend .entypo-dot-3;
    float:left;
  }  
}

.twitter-info {
  margin-left: -1.2em;
  padding-top: 1.6em;
  padding-bottom: 1.35em;

  
  li {
        border-left: solid 2px rgba(black, 0.2); 
    color: rgba(black,0.6);
    display: inline-block;   
    font-family: 'Pathway Gothic One', sans-serif;
    font-size: 1.8em;
    text-align: center;
    width: 32%;
    
    &:first-child {
        border: none; }
      
      span {
        color: rgba(black,0.4);
        display: block;
        font-size: 1em;
        font-weight:700;
        margin-top: .2em;
        text-transform: uppercase;
      }   
  }
}

.right {
  float: right !important;
}


.social {
  background: rgba(black,0.4);
  box-shadow: 0 -5px 10px -4px rgba(black,0.4), 0 5px 10px -4px rgba(black,0.4);
  display: none;
  position: absolute;
  right: -6.5em;
  text-align: center;
  width: 5em;
  z-index: -1;
  
  [class*="entypo-"] {
    background: #ecf0f1;
    border-radius: 50%;
    color: #707476;
    cursor: pointer;
    display: block;
    font-size: 1em;
    height: 4em;
    line-height: 2;
    margin: 1em auto 0.5em; 
    transition: 0.5s background ease-in-out;
    width: 4em;
    
    &:hover {
        color: #ecf0f1; 
      }
      
      &:before {
        transition: 0.5s color ease-in-out;
        
      }
  }
}



.entypo-facebook:hover {
  background: #3b5998;
}

.entypo-twitter:hover {
  background: #00acee;
}

.entypo-gplus:hover {
  background: #db4a39;
}

.entypo-tumblr:hover {
  background: #34526f;
}

section {
  background: #ecf0f1;
  box-shadow: 0 5px 10px -4px rgba(black,0.4);
  width: 100%;
}

@keyframes slide-in {
  0% {
    right: 5em;
  }
  100% {
    right: -6.5em;
  }
  
}