[Solved] How to show div or button on image hover?

by


UPDATE

If you want one button only, this will not work without the help of javascript/jquery.

I updated my fiddle so it fits your needs.
On hover, we need to get the hovered elements position and apply this to the absolute positioned button.

$(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();
});
span.lightbox{
  display: inline-block;
  margin: 20px;
}

button#buttonChange{
  position: absolute;
  top: 0;
  left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Hope this is what you’re trying to accomplish here.

0

solved How to show div or button on image hover?