JSFiddle - React, Tailwind, and code Playground

HTML

<div class="image">
    <img src="http://lorempixum.com/80/80">
      
    <div class="sharerDiv">
  						<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="OFFFMX">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>			
							<br>
							<iframe src="http://www.facebook.com/plugins/like.php?href=http://www.offf.mx/&layout=button_count&show_faces=false&width=480&action=like" scrolling="no" frameborder="0" allowTransparency="true" style="width:120px; height: 20px;"></iframe></div>
      </div>

					
				

<!-- Case 2 -->
<!-- 
<div class="image">
    <img src="http://lorempixum.com/80/80">
      
    <div class="sharerDiv">
  <p>Hello!</p>
      
    </div>

</div> -->

CSS

.image
{
  width: 80px;
  height: 80px;
}
.sharerDiv
{
  display: none;
  position: absolute;
  z-index: 99999999;
}
img
{
  position: relative;
  display: block;
  margin-left: 0px;
}
.image:hover .sharerDiv
{
  display: block;
}
.image:hover img
{
  display: none;
}