In HTML, how can you make an image appear while you are hovering over text?

Question

In HTML, how can I cause an image to appear (or become visible) while I\'m hovering over a specific section of text? I\'m coding an HTML app, and the following is my code:

Answer 1

To show an image when you hover over a whole section of text you can show and hide the image on hover:

CSS

img{
   display: none
}

p.one:hover + img{ //img is a sibling
   display: block;
}

p.two:hover img{ //image is a child
   display: block;
}

HTML

HOVER OVER ME - IMG IS SIBLING



HOVER OVER ME -IMG IS CHILD
   

EXAMPLE ONE

OR

If you want to hover over a specific part of the text, you can wrap the text in a span and just make the image a sibling or child of that span:

HTML

This is some text. HOVER OVER ME
   

CSS

img{
   display: none
}

span:hover + img{
   display: block;
}

EXAMPLE TWO