<div class="container">
<div class="top">
<a href="#" class="face"><i class="zocial-facebook"></i></a>
<a href="#" class="tweet"><i class="zocial-twitter"></i></a>
</div>
<div class="bottom">
<a href="#" class="dribble"><i class="zocial-dribbble"></i></a>
<a href="#" class="pin"><i class="zocial-pinterest"></i></a>
</div>
</div>
@import "compass/css3";
@import url(http://weloveiconfonts.com/api/?family=zocial);
[class*="zocial-"]:before {
font-family: 'zocial', sans-serif;
font-style: normal;
font-size: 1.5em;
color: #fff;
position: absolute;
left: 45%;
top: 40%;
}
* {
margin: 0;
padding: 0;
@include box-sizing(border-box);
}
html, body {
background-color: #eee;
}
.container {
display: block;
width: 500px;
background-color: #fff;
height: 400px;
margin-left: -250px;
position: absolute;
left: 50%;
margin-top: 3em;
}
.top {
width: 100%;
height: 200px;
background-color: #333;
.face {
width: 50%;
float: left;
height: inherit;
z-index: 2;
background-color: #3B5998;
display: block;
text-decoration: none;
position: relative;
transition: all, 0.2s;
&:hover {
@include scale(1.2);
transition: all, 0.2s;
z-index: 100000;
}
}
.tweet {
text-decoration: none;
position: relative;
display: block;
width: 50%;
height: inherit;
float: left;
background-color: #4099FF;
transition: all, 0.2s;
z-index: 1;
&:hover {
transition: all, 0.2s;
@include scale(1.2);
z-index: 10000;
}
}
}
.bottom {
height: 200px;
width: 100%;
background-color: #999;
.dribble {
text-decoration: none;
position: relative;
display: block;
width: 50%;
height: inherit;
background-color: #c73b6f;
float: left;
transition: all, 0.2s;
z-index: 1;
&:hover {
transition: all, 0.2s;
z-index: 10000000;
@include scale(1.2);
}
}
.pin {
text-decoration: none;
position: relative;
z-index: 1;
display: block;
background-color: #cb2028;
width: 50%;
height: inherit;
float: left;
transition: all, 0.2s;
&:hover {
transition: all, 0.2s;
@include scale(1.2);
z-index: 99999999999;
}
}
}
Also see: Tab Triggers