I need a solution for ensuring that the full thumbnail image stays within the viewport when hovering over a link on my page. Below is the current code I am using to create this effect:
HTML:
<span class="popup-wrap">
<a class="popup" href="images/flamingo.jpg">flamingo
<span>
<img src="images/flamingo.jpg" alt="flamingo" />
</span>
</a>
<a class="popup" href="images/enough.jpg">enough
<span>
<img src="images/enough.jpg" alt="enough" />
</span>
</a>
</span>
CSS:
.popup-wrap { position:relative;}
.popup span {
position:absolute;
visibility:hidden;
}
.popup:hover, .popup:hover span {
visibility:visible;
z-index:1;
}
img {
max-width: 200px;
max-height: 200px;
}