image appears when hover over text

Question

I'm not super comfortable with JS , but that seems to be the best way to do this , having a hard time applying other peoples solutions to my scenario.

Want an image to appear when hover over text. I can get the image to appear on hover, but it appears up way up at top of page, and I am having a hard time getting it to appear in the viewport without indicating what the top margins is. Is that the best way to do it?

So far I have:

    <div id="popup">
       <div class="large-6 columns">
           <a href="#"> Bristol Hayward-Hughes <span> <img src="bristol.jpg" alt="Bristol" id="bristol"> </span> </a> 
        </div>
    </div>

and

    #popup span {
    display: none;
    }

    #popup a:hover span {
    display: block;
    position: absolute;
    top: 0px;
    left: 170px;
    width: 400px;
    margin: auto;
    }

    #bristol {
    position: absolute;
    z-index: 1;
    margin-top: 100px;
    }

Answer 1

Please give relative positioning to your span that holds your image.

#popup a:hover span {
display: block;
position: relative; // Changed absolute to relative
//Give top and left position with respect to your anchor tag.
top: 0px;
left: 170px;
width: 400px;
margin: auto;
}

Remove the margin-top from the image tag as well.

#bristol {
    position: absolute;
    z-index: 1;
    /*margin-top: 100px;*/ //Removed margin-top on the image
    }

Answer 2

If I'm understanding the question correctly, you'll need to place position:relative; in the parent Div: #popup that the image is residing in.

Check this Fiddle for reference: https://jsfiddle.net/rjschie/q87um7wd/2/

For an example: comment the position:relative; line under #popup and re-run the example. You'll see that the Image appears at the top of the window. Then uncomment it, and re-run and it will appear relative to the #popup div.