JSFiddle - React, Tailwind, and code Playground

HTML

<div class="first">
    <a href="#" class="vk"></a>
    <a href="#" class="tw"></a>
    <a href="#" class="fb"></a>
    <a href="#" class="mail"></a>
</div>
<div class="second">
    <a href="#" class="vk"></a>
    <a href="#" class="mail"></a>
</div>
<div class="third">
    <a href="#" class="vk"></a>
    <a href="#" class="fb"></a>
    <a href="#" class="mail"></a>
</div>

CSS

div {
    width: 160px;
    height: 160px;
    border-radius: 100%;
    border: 3px solid #333;
    display: inline-block;
    margin: 10px;
    position: relative;
}

a {
    display: block;
    position: absolute;
    width: 30px;
    height: 30px;
    background: url(http://htmlbook.ru/files/social_icons.png) no-repeat;
}

.first {background: url(http://htmlbook.ru/files/person1.jpg) no-repeat 50% 50%;}
.second {background: url(http://htmlbook.ru/files/person2.jpg) no-repeat 50% 50%;}
.third {background: url(http://htmlbook.ru/files/person3.jpg) no-repeat 50% 50%;}

.vk {background-position: 67% 100%; left: 20px;}
.vk:hover {background-position: 67% 0%;}

.tw {background-position: 33% 100%; left: -3px;top: 25px;}
.tw:hover {background-position: 33% 0%;}

.fb {background-position: 0% 100%; left: -15px;top: 57px;}
.fb:hover {background-position: 0% 0%;}

.mail {background-position: 100% 100%; left: 65px;top: 143px;}
.mail:hover {background-position: 100% 0%;}