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