-5

How do I show div or button on image hover? Only for image that hovered.

<div class='post_body'>
    <div class='post entry-content '>
        <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/350x150">
        </span>
        <span class='lightbox'>
            <img class='bbc_img' src="http://via.placeholder.com/350x150">
        </span>    
<button>
 Test
</button>   
    </div>
</div>

Show button on image: top-right

The image name can be a random.

Need for IPB 3.4.9

Chris Catignani
  • 5,040
  • 16
  • 42
  • 49
Erekle Maziashvili
  • 43
  • 11

3 Answers3

0

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.

Johannes Piontkowitz
  • 687
  • 1
  • 9
  • 18
0
 <!-- Just need to add style to every button as follows-->
<div class='post_body'>
<div class='post entry-content '>
    <span class='lightbox'>
        <img class='bbc_img' src="http://via.placeholder.com/350x150">
        <button style="position: absolute; margin-left: 296px; top: 12px;">
        Test 1
        </button>
    </span>
    <span class='lightbox'>
        <img class='bbc_img' src="http://via.placeholder.com/350x150">
         <button style="position: absolute;margin-left: 296px;top: 164px;">
        Test 2
        </button>
    </span>
    <span class='lightbox'>
        <img class='bbc_img' src="http://via.placeholder.com/350x150">
         <button style="position: absolute;margin-left:296px;top: 318px;">
        Test 3
        </button>
      </span>     
   </div>  
 </div>
Roopesh
  • 1
  • 3
  • You should rather make the `.lightbox` a relative positioned element so you can apply the `absolute` position inside these containers rather than the whole page. – Johannes Piontkowitz Mar 07 '18 at 13:15
0

$(".bbc_img").hover(function () {
    $('#ButtonChange').show();
}, function () {
    $('#ButtonChange').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class='post_body'>
    <div class='post entry-content '>
        <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/350x150">
        </span>
        <span class='lightbox'>
            <img class='bbc_img' src="http://via.placeholder.com/350x150">
        </span>    
<input type="button" id="ButtonChange" value="My Button" /> 
    </div>
</div>

But need show button (top,right) only in image that hovered.

Erekle Maziashvili
  • 43
  • 11
  • You should have edited your post. But just to be clear, do you need **one** button that changes position or multiple? – Johannes Piontkowitz Mar 07 '18 at 12:48
  • In fiddle working, but not working in my html. I found solution and this solution working in my html, but need modification for complete. here fiddle https://jsfiddle.net/Qartvela/f9zv1jL7/7/ 1) Need show "Click Me" to right top position on images. 2) Class alt-wrap working in full width and not width same inserted image. Thank you for help and for attention. – Erekle Maziashvili Mar 07 '18 at 14:13
  • Class .alt-wrap working in full width and not width same .bbc_image – Erekle Maziashvili Mar 07 '18 at 14:35
  • Add `display: inline-block` to the `.alt-wrap` class and remove every position attribute except of `top: 0` and `left: 0` from your `.alt-wrap a.MyShare` class. Last but not least, add `display: block` to `.lightbox`. That should do it. – Johannes Piontkowitz Mar 07 '18 at 14:42