JSFiddle - React, Tailwind, and code Playground

HTML

<div class='post_body'>
    <div class='post entry-content '>
     <button id="buttonChange" value="MyButton">
            Hi! Click me!
            </button>
        <span class='lightbox'>
            <img class='bbc_img' src="http://via.placeholder.com/350x150">
        </span>
        <span class='lightbox'>
            <img class='bbc_img' src="http://via.placeholder.com/350x250">
        </span>
        <span class='lightbox'>
            <img class='bbc_img' src="http://via.placeholder.com/350x450">
        </span>     
    </div>  
</div>

CSS

span.lightbox{
  display: inline-block;
  margin: 20px;
}

button#buttonChange{
  position: absolute;
  top: 0;
  left: 0;
}

span img:hover + button{
  display: block;
}

JavaScript

$(document).ready(function(){
	$("#buttonChange").hide();
})

$(".bbc_img").hover(function(){
	// this is the mouseenter event
  var position = $(this).position(); // this is the hovered Image element
  
  $("#buttonChange").css("top", position.top);
  $("#buttonChange").css("left", position.left);
  $("#buttonChange").show();
}, function(){
	// this is the mouseleave event
	$("#buttonChange").hide();
});