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