Trying to show image in popup box when I hover over a button

HTML & CSS
1

I am trying to get an image to show in a pop-up box when I hover over the button, my html is simple and shows a message when I try it but when I put an image into the code it does nothing.

Sample button
<!--<li><a href="#"></a>C<b><href="img/C.jpg"></href="img"</b></li>-->, this is the piano key i am sing.
would any one have any ideas on how this can be done, I need to do it for a lot of buttons.
Do i need to use Javascript to allow this to happen. I am a new comer to development and have some ideas I have been trying to implement.
Many thanks
Paul

2

I’m not sure what you are doing with this code. For one, it’s commented out so will do nothing, and secondly, the tags don’t make any sense.

No, it’s quite possible to do this with just html and css.

3

Hi @PaulGillisMusic! The image tag goes like

<img src="image.path" />

Also, the <a> tag requires some content (unless there’s some additional styling involved). Maybe you had something like this in mind?

<li>
  <a href="#"><b>C</b></a>
  <img src="img/C.jsp" />
</li>

That hover effect could then be achieved with CSS like

li img {
  display: none;
} 

li a:hover + img {
  display: block;
}
1 Like
4

Here is an example of showing an image on hovering a button.

5

Thanks guys for this it works brilliant.

6

not quite.

For HTML it is <img src="image.path">
For XHTML it is <img src="image.path"/>

There is no space before the / (that’s a leftover from serving XHTML as HTML to Netscape 4).

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.