Hover overlap

HTML

<header>
    <div class="tiles">
        <div class="logo">
            <a href="/">lk</a>
        </div>
        <div class="social large github">
        </div>
    </div>
</header>

CSS

@import url(http://fonts.googleapis.com/css?family=Yellowtail);
 header {
    text-align:center;
}
.tiles {
    display:inline-block;
    position:relative;
    margin-top:11.25em;
    font-size:9px;
    font-size:0.8625rem
}
.logo {
    display:inline-block;
    text-align:center;
    width:0;
    line-height:0;
    position:relative;
    font-size:10em
}
.logo:before, .logo:after {
    position:absolute;
    left:-1em;
    width:1em;
    border:0 solid transparent;
    border-width:0.866em 0.5em;
    content:'';
    z-index:-1
}
.logo:before {
    border-bottom-color:#126567;
    border-top:0;
    bottom:0;
}
.logo:after {
    border-top-color:#126567;
    border-bottom:0;
    top:0;
}
.logo a {
    -webkit-backface-visibility: hidden;
    display:inline-block;
    position:absolute;
    bottom:-0.42em;
    left:-0.5em;
    margin:0;
    color:#e7f3f2;
    text-decoration:none;
    line-height:75%
}
.logo:hover:before {
    border-bottom-color:#0e5051;
}
.logo:hover:after {
    border-top-color:#0e5051;
}
.logo a {
    font-family:'Yellowtail';
    font-size:1.9em;
    padding:0 0.1em 0 0.1258em;
    -webkit-transform:rotate(1.3deg);
    -moz-transform:rotate(1.3deg);
    -ms-transform:rotate(1.3deg);
    -o-transform:rotate(1.3deg);
    transform:rotate(1.3deg);
    z-index:10
}
.logo a:after {
    position:absolute;
    top:-0.1742em;
    right:0.2555em;
    height:0.94153em;
    width:0;
    border:0 solid transparent;
    border-width:0.05773em 0 0.05773em 0.1em;
    border-left-color:#e7f3f2;
    -webkit-transform:rotate(28.7deg);
    -moz-transform:rotate(28.7deg);
    -ms-transform:rotate(28.7deg);
    -o-transform:rotate(28.7deg);
    transform:rotate(28.7deg);
    content:''
}
.social {
    position:absolute;
    font-family:'Yellowtail';
    line-height:180%
}
.social a {
    display:inline-block;
    position:absolute;
    left:0
}
.social.large {
    font-size:4.95em
}
.social.github {
    top:1.96875em;
    left:2.0625em;
    display:inline-block;
...