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

<p class="one">HOVER OVER ME - IMG IS SIBLING</p>
<img src="http://www.placecage.com/100/100"/>


<p class="two">HOVER OVER ME -IMG IS CHILD
   <img src="http://www.placecage.com/100/100"/>
</p>

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

<p>This is some text. <span>HOVER OVER ME</span>
   <img src="http://www.placecage.com/100/100"/>
</p>

CSS

img{
   display: none
}

span:hover + img{
   display: block;
}

EXAMPLE TWO