<html> <head> <title>Div example</title> </head> <body> <style type="text/css"> .imgpopup{ position: relative; z-index: 0; } /* The large image is hidden */ .imgpopup span{ position: absolute; padding: 5px; background-color: #FFFF00; color: #000000; border: 1px dashed #000000; visibility: hidden; text-decoration: none; } /* Required for IE to display popup */ .link:hover{ background-color: transparent; z-index: 1; } .link:hover span{ visibility: visible; top: 0px; left: 125px; } </style> <div class="imgpopup"> <a href="https://www.mobilefish.com" class="link"> <!-- Display the small image --> <img src="../download/css/3dsmax7_teapot_red_mobilefish_small.gif" alt="teapot small" width="100" height="66" border="0" /> <!-- Display the large image --> <span> <img src="../images/tutorials/3dsmax7_teapot_red_mobilefish.gif" alt="teapot large" /> <br />3D Studio Max Teapot. </span> </a> </div> </body> </html>