JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="social">
    <li>
        <a href="http://facebook.com/">Facebook</a>
    </li>
    <li>
        <a href="http://twitter.com/">Twitter</a>
    </li>
    <li>
        <a href="http://youtube.com/">YouTube</a>
    </li>
    <li>
        <a href="http://tumblr.com/">Tumblr</a>
    </li>
    <li>
        <a href="http://instagram.com/">Instagram</a>
    </li>
    <li>
        <a href="http://flickr.com/">Flickr</a>
    </li>
</ul>

CSS

.social {
    list-style: none;
    width: 312px;
    margin: 0;
    padding: 0;
}
.social li {
    display: block;
    float: left;
    height: 100px;
    width: 100px;
    margin: 0 2px 2px 0;
    padding: 0;
    background: url('http://upload.wikimedia.org/wikipedia/en/1/12/Original-facebook.jpg') center center no-repeat;
    overflow: hidden;
}
.social li a {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: url('http://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/100px-F_icon.svg.png') 0px 0px no-repeat;
    color: transparent;
    -webkit-transition: background-position 1s;
    -moz-transition: background-position 1s;
    transition: background-position 1s;
}
.social li a[href*='twitter.com'] {
    background-image: url('http://upload.wikimedia.org/wikipedia/en/thumb/9/9f/Twitter_bird_logo_2012.svg/100px-Twitter_bird_logo_2012.svg.png') /* Yeah, these icons shouldn't be partly transparent unless you want the content below peeking through */
}
/* Not actually going to bother doing the rest of the icons */
.social li:hover a {
    background-position: 0px 101px; /* Far enough to make it off canvas */
}