JavaScript isn't my strongest suit, but it seems like the most effective solution for this issue. I've been struggling to implement other people's solutions in my own scenario.
I'm trying to make an image appear when hovering over text. While I've gotten the image to appear on hover, it shows up at the very top of the page. I'm having trouble making it appear within the viewport without specifying specific top margins. Is there a better way to achieve this?
Here's what I have so far:
<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;
}