Simply utilize visibility: hidden;
#like_user_wrapper{
margin-top:20px;
padding:5px;
height:55px;
box-shadow:1px 1px 10px #f0f0f0;
background:white;
display:inline-block;
visibility: hidden;
}
Take note that a custom ID is being used (#...) instead of a class (....)
To make it visible later on, you can apply this JavaScript property to that specific ID:
document.getElementById('like_user_wrapper').style.visibility='visible';
This can be incorporated in an onmouseover="", or a javascript function etc, so it becomes visible when desired. To see how this works in html, check out this example:
<!DOCTYPE HTML>
<html>
<head>
<style>
#like_user_wrapper {
margin-top:20px;
padding:5px;
height:55px;
box-shadow:1px 1px 10px #f0f0f0;
background:white;
display:inline-block;
visibility: hidden;
}
#hover {
width: 80px;
height: 50px;
background-color: red;
}
</style>
</head>
<body style="background-color:blue;">
<div id="like_user_wrapper">Like User Wrapper</div>
<br><br>
<div id="hover" onmouseover="document.getElementById('like_user_wrapper').style.visibility='visible';" onmouseout="document.getElementById('like_user_wrapper').style.visibility='hidden';">Hover over me</div>
</body>
</html>
Learn more about the visibility CSS property from this help page
Note: In most browsers, by default a DIV has the display property block, so using inline-block may not be necessary - you could wrap it in a <div> with that property regardless.