JSFiddle - React, Tailwind, and code Playground

by Shiv Singh

HTML

<div id="fixedsocial">
    <a href="#"><div class="facebookflat"></div></a>
    <a href="#"><div class="twitterflat"></div></a>
    <a href="#"><div class="googleflat"></div></a>
    <a href="#"><div class="instagramflat"></div></a>
</div>

CSS

#fixedsocial {
    top:30%;
    height:200px;
    width:60px;
    position:fixed;
    right: 0;
}

.facebookflat {
    background:url("http://placehold.it/50x50");
    height:50px;
    width:50px;
   transition:ease 500ms;
    background-size:50px;
    opacity:1;
}

.facebookflat:hover {
    background:url("http://placehold.it/50x50");
    height:50px;
    width:50px;
    background-size:60px;
    opacity:0.5;
    transition:ease 500ms;
    margin-left:-20px;
    width:70px;

}

.twitterflat {
    background:url("http://placehold.it/50x50");
    height:50px;
    width:50px;
    transition:ease 500ms;
    background-size:50px;
    opacity:1;
}

.twitterflat:hover {
    background:url("http://placehold.it/50x50");
    height:50px;
    width:50px;
    background-size:60px;
    opacity:0.5;
    transition:ease 500ms;
    margin-left:-20px;
    width:70px;
}
.googleflat {
    background:url("http://placehold.it/50x50");
    height:50px;
    width:50px;
    transition:ease 500ms;
    background-size:50px;
    opacity:1;
}

.googleflat:hover {
    background:url("http://placehold.it/50x50");
    height:50px;
    width:50px;
    background-size:60px;
    opacity:0.5;
    transition:ease 500ms;
    margin-left:-20px;
    width:70px;
}
.instagramflat {
    background:url("http://placehold.it/50x50");
    height:50px;
    width:50px;
    transition:ease 500ms;
    background-size:50px;
    opacity:1;
}

.instagramflat:hover {
    background:url("http://placehold.it/50x50");
    height:50px;
    width:50px;
    background-size:60px;
    opacity:0.5;
    transition:ease 500ms;
    margin-left:-20px;
    width:70px;
}