JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap">
<div id="zobmenu"></div>
<div id="zobbigmenu">
<a href="http://instagram.com/dandecasa" target="_blank">
<img src="http://theyellowhopeproject.com/iconmonstr-instagram-4-icon.png" height="50px"></img>
</a>
</div>
</div>

CSS

#zobmenu {
position:absolute;
left:0; margin:0; width: 20px ; height: 100%; border:0; background-color:black; opacity:0.8;
z-index:300;
}

#wrap:hover #zobmenu ~#zobbigmenu {
margin-left: 20px ;
cursor:alias;
opacity:0.8; 
 margin-right: auto ;
z-index:10;

}


#zobbigmenu {

margin-left:-500px;
 position:absolute;
border-bottom:0px;
border-top:0; border-left:0; border-right:0;
border-style:solid;
border-bottom-color:#000000;
z-index:-1;
left:0;  height:100% ;margin-right: auto ;  width:25%; background-color:grey; opacity:0; list-style-type: none;
-webkit-transform-origin: top -10px left 0px;
    -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
		
		font-family:"Source Sans Pro", Helvetica, Arial, sans-serif;
		font-size:20px;
		font-weight:bold;
		padding:20px;

		}