What is the best way to display a div or button when hovering over an image?

Is there a way to display a div or button when hovering over an image? This should only occur for the specific image being hovered over.

<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>

The button should appear on the top-right corner of the image when hovered over.

The name of the image can be random.

This feature is required for IPB 3.4.9

jqueryhtmlcsshover

Answer №1

UPDATE

If your goal is to have only one button, you will need some assistance from javascript/jquery for it to work.

I have made adjustments to my fiddle to meet your requirements. When hovering over an element, we must determine its position and apply it 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>

I hope these changes align with what you are aiming to achieve here.

Answer №2

 <!-- To style every button, add the following CSS attributes-->
<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;">
        Example 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;">
        Example 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;">
        Example 3
        </button>
      </span>     
   </div>  
 </div>

Answer №3

$(".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>

However, the button should only appear (top, right) when hovering over an image.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Middle-Click JavaScript Action

On the website I'm currently working on, there is a button that uses a sprite sheet animation and therefore needs to be set as a background image. I want the button to have a slight delay when clicked, so the animation can play before redirecting to a ...

javascriptjqueryhtmlhrefsprite-sheet

What is the best way to expand this HTML5 canvas script to fill the entire screen?

I am having issues adjusting the canvas to fill the entire window. Currently, it is set to 500x500. As a beginner in coding, any assistance would be greatly appreciated! Thank you. Below is the code snippet: <!DOCTYPE html> <html> <head& ...

javascripthtmlcss

Problem with Silverstripe: Replicating Site configuration or settings menu

I have duplicated the Settings menu (siteConfig) folder in order to create a new CMS menu for inputting company information. The functionality of the menu is working correctly, however, the CSS styling is not loading properly. Image: https://i.stack.imgur ...

csssilverstripe

Jquery's remove function fails to function correctly when used on a cloned element

I am facing an issue where I have a list of rows that need to be deleted. However, when I attempted to use jQuery's remove function, it only removed the original row and not its clone. My goal is for the parent element of the parent to be removed when ...

javascriptphpjqueryhtml

Setting up the Node.js file system for an Ionic project: A step-by-step guide

Seeking a solution to delete a Folder/File on the client side using javascript/jQuery/AngularJS1. After researching, I found that it can be done using Node.js as shown in this Sitepoint link. Now, I am unsure how to integrate Node.js fs(File System) with ...

javascriptjqueryangularjs

Having issues with my JavaScript timer - seeking assistance in troubleshooting the problem

Trying to set a timer for my little game, but facing some difficulties. The timer causes the balance to randomly increase from 0 to 13000 + some extra amount. <script> var coins = 0; var speed = 1; </script> <center> <h4> ...

javascripthtmlcss

The Dysfunction of JQuery UI 1.12.1 Autocomplete

I am encountering some challenges with implementing JQuery UI. The version of JQuery UI I am using is 1.12.1, the latest one available. I have downloaded the autocomplete feature along with all other necessary widgets. In my project, I have placed jquery ...

javascriptjqueryasp.netmodel-view-controller

Challenges Encountered When Inputting Year in ReactJS Date Picker Component

I've encountered a problem with a date input component in my ReactJS project and need some assistance with resolving two issues: Problem 1: Year Input Length The first issue is that the year input field allows six digits, but I want to restrict it to ...

javascripthtmlreactjs

Guide for utilizing the Primary Key in a Django context view to display data in an HTML template through a Python for loop

Within my views, I have the following method along with my HTML structure: def index(request): context = { "user": User.objects.get(id = request.session['user_id']), "book": Book.objects.all(), &qu ...

pythonhtmldjangorenderprimary-key

Tips for creating a striped background color on your Blogger blog's homepage

Currently, I am personalizing the default theme on Blogger called Simple Dark, but I have hit a roadblock when it comes to creating a striped background color for the posts on the homepage. Here is a glimpse of how my blog currently appears, and here is ...

javascripthtmlcssxmlblogger

Why does my AJAX request keep returning a 500 internal error in Laravel?

My goal is to verify the username when a new user is entered, using AJAX so that the correct username can be displayed in the field. Form <form role="form"> <input type="hidden" id="token" name="_token" ...

jqueryajaxlaravel

using jquery to choose a language from a dropdown selection

http://jsfiddle.net/hr5aH/ I am a beginner in jQuery and I am facing a small issue here. When I select a language from the drop-down menu, the page refreshes but the drop-down menu does not display the language I selected. It still shows "Choose Language" ...

phpjquery

Encountering an inexplicable "undefined" error in HTML after receiving an

(apologies for any misspelled words) Hey everyone, I hope you're having a great time. This is my first experience with ajax, and I'm trying to incorporate some elements (messages sent and received) into HTML using ajax. However, all I see is an u ...

phphtmlajax

navigation bar: retain link hover state even after displaying sub-menu

My navigation bar has submenus with background images in .png format. Only 3 links in my navbar have these submenus. The issue I am facing is that when the menu link is in a hover state and the submenu is being hovered over, the nav link loses its hover st ...

javascriptjqueryhtmlcss

The slide experiences overflow as it continuously slides up and down

Hey everyone, I've been working on creating a slider effect when a button is clicked. Details about a specific part appear in a designated div upon button click. However, I've encountered a bug where, if I click quickly on different slides, the c ...

javascriptjqueryhtml

Change the absolute positioning of a div element to be applied globally

When trying to get the position of an element using jQuery's .offset(), I then set the div to have a position:absolute; and adjust its left and top based on the information obtained from offset(). This method works well when all the element's pa ...

jqueryhtmlcsspositioncss-position

ASP repeater exceeding container boundaries

Having trouble with my asp repeater that reads from a database and generates repeatable divs. The issue arises when the h4 spills over the div, particularly when using <%Eval. Any suggestions on how to fix this? Manual input divs don’t seem affected o ...

c#htmlcssasp.net

Clicking on a React component will result in highlighting

What's the best way to display the selected item after a user clicks on it? <Box py={2}> <Grid container width="330px"> <Grid container direction="column" item xs align="left"> ...

cssreactjsmaterial-ui

Preserving the dimensions of an expandable div

Is there a way for a div to maintain its print layout while still allowing for zooming? I attempted to enable zoom functionality on a div using jQuery to adjust the height and width percentages of a specific div with the ID "page". <div style=" heigh ...

javascriptjqueryhtmlcss

The hover effect is not altering the color

$(document).ready(function() { $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll > 200) { $(".nav-bg").css({ "background": "#fff", ...

javascriptjquerycss