JSFiddle - React, Tailwind, and code Playground

HTML

<img src="http://img24.imageshack.us/img24/3221/32845401.png" alt="img1" id="btnSocial" class="social1" />
<img src="http://img24.imageshack.us/img24/3221/32845401.png" alt="img1" id="btnSocial" class="social2"/>
<img src="http://img24.imageshack.us/img24/3221/32845401.png" alt="img1" id="btnSocial" class="social3"/>
<img src="http://img24.imageshack.us/img24/3221/32845401.png" alt="img1" id="btnSocial" class="social4"/>

CSS

#btnSocial{
    width:100px;
    position: relative;
    opacity: 0.5;
    -webkit-opacity: 0.5;
    -moz-opacity: 0.5;
    transition: 0.5s ease;
    -webkit-transition: 0.5s ease;
    -moz-transition: 0.5s ease;
    
}
#btnSocial:hover{
    width: 150px;
    opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
}
.social1{
    top:0;
    left:0;
}
.social2{
    top:100px;
    left:-50px;
}
.social3{
    top:0px;
    left:-100px;
}
.social4{
    top:100px;
    left:-150px;
}