You will need to use javascript. More specifically make that onmouseover and onmouseout call a javascript function.
I am assuming this is just for one or two pictures if it is for more, like a picture gallery on your site, it will cause hugh load times.
Now this is just a quick copy of some code I used just the other day. This is setup so that when the user mouses over the thumbnail a new image pops up over top of everything and then disappear when they mouses out.
First all your html needs to be wraped in a <div> tag if you haven't yet, and a z-index set for that div.
<html>
<body>
<div style="z-index: 1;">
<!-- all your code here-->
</div>
</body>
</html>
Then somewhere in your code you need to place the large image inside of a <div> that is, well, technically invisible.
<div style="position: absolute; top: -900px; left: -900px; display: none; z-index: 2;" id="lgimage">
<img src="lg-image.jpg" width="400" height="400" border="0">
</div>
Then on your thumbnail image you do this
<img src="sm-image.jpg" width="100" height="100" border="0" onMouseover="showimage('lgimage', event)" onMouseout="hideimage('lgimage', event)">
then in the header of the html place these functions
<script language="Javascript" type="text/javascript">
function showimage(imageid, event) {
var agent = navigator.userAgent.toLowerCase();
var scrollp = [0, 0];
if (typeof document.documentElement.scrollTop != "undefined" && document.documentElement.scrollTop > 0 ){
scrollp = [document.documentElement.scrollLeft,
document.documentElement.scrollTop];
}
else if (typeof document.body.scrollTop != "undefined" ){
scrollp = [document.body.scrollLeft,
document.body.scrollTop];
}
else if (typeof window.pageYOffset != "undefined" ){
scrollp = [window.pageXOffset,
window.pageYOffset];
}
var cursorp = [0, 0];
if(typeof event.pageX != "undefined" && typeof event.x != "undefined"){
cursorp[0] = event.pageX + 50;
cursorp[1] = event.pageY - 300;
}
else if (agent.indexOf("gecko") != -1){
cursorp[0] = event.clientX + scrollp[0] + 50;
cursorp[1] = event.clientY + scrollp[1] - 300;
}
else{
cursorp[0] = event.clientX + scrollp[0] + 50;
cursorp[1] = event.clientY + scrollp[1] - 300;
}
document.getElementById(imageid).style.top = cursorp[1] + "px";
document.getElementById(imageid).style.left = cursorp[0] + "px";
document.getElementById(imageid).style.display = "block";
}
function hideimage(imageid, event) {
document.getElementById(imageid).style.top = "-900px";
document.getElementById(imageid).style.left = "-900px";
document.getElementById(imageid).style.display = "none";
}
</script>
Now that first function is bit more that just a mouse over and the image appears. It actually makes the image appear based on were your mouse pointer is at on the screen and it is designed to work in a majority of browsers. Hence the reason you see cursorp[0] and cursorp[1] set repeatedly in the first function.
Also in that first function the + 50 and - 300 are just there to set the image position better, relative to the mouse pointer and can be changed in any direction.
Any way that maybe a bit of an over kill for what you wanted by like I said it is just a quick copy and past of what I used just the other day. If you need something simpler all of it can easily be simplified.