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

        .plank1 {
             position: static;
             left: 80px;
             top: 100px;
             visibility: visible;
        }

        .plank1appear:hover .plank1{
             visibility: visible;
        }

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