JSFiddle - React, Tailwind, and code Playground

by gopi1410

HTML

<div id="fixedsocial">
    <div class="facebookflat"></div>
    <div class="expand"><img src="http://placehold.it/150x50"></div> 
</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;
    opacity:0.5;
    transition:ease 500ms;
}

.expand {
    height:50px;
    width:150px;
    display: none;
    position:fixed;
    right: 0;
}

JavaScript

$(".facebookflat").hover(function() {
  $(".expand").show(500);
  }, function() {
    $(".expand").hide(500);
});