To hover over an image and have that show a larger image at a new location all done with css has always been a challenge for me. I wish I could do it, but all I ever end up with is two images that flicker. This can be done with some javascript though.
The example I give can do this for a number of smaller images provided the small image has a 't' after the name and before the dot image type.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>New document</title>
<script type="text/javascript">
function hidy()
{
document.getElementById('shown_pic').style.backgroundImage = "";
}
function show(image)
{
front = image.substring(0, image.lastIndexOf('.')-1);
back = image.substring(image.lastIndexOf('.'));
final = front.concat(back);
document.getElementById('shown_pic').style.backgroundImage = "url('"+final+"')";
}
</script>
<style type="text/css">
div#shown_pic
{
position: absolute;
top: 300px;
left: 450px;
}
#shown_pic
{
height: 240px;
width: 320px;
}
</style>
</head>
<body>
<img src="images/pic3t.jpg" onmouseover="show('images/pic3t.jpg');" onmouseout="hidy();" height="75" width="100" alt="" />
<div id="shown_pic">
</div>
</body>
</html>
Here are the two images used:
pic3.jpg
and
pic3t.jpg
Before you post, read our: 
