JSFiddle - React, Tailwind, and code Playground

by fredd man

HTML

<div id="fixedsocial">
    <div class="facebookflat"></div>
    <div class="twitterflat"></div> 
</div>

CSS

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

.facebookflat {
    background:url("https://embed-ssl.wistia.com/deliveries/259ebbb9736684c0f41bc015a2c98e22.bin?disposition=attachment&filename=celular.png");
    height:50px;
    width:50px;
   transition:ease 500ms;
    background-size:50px;
 
}

.facebookflat:hover {
    background:url("https://embed-ssl.wistia.com/deliveries/259ebbb9736684c0f41bc015a2c98e22.bin?disposition=attachment&filename=celular.png");
    height:50px;
    width:50px;
    background-size:60px;
    
    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;
}