CSS - Desperately Need Css Help Asap (hover - Image Question)

I'm taking a condensed class at the community college here and my final is due tomorrow night. My teacher has a very thick Russian accent and is very difficult to understand, and does not make himself particularly available away from class hours...so...I'm sort of stuck. I understand that this is an embarrassingly basic CSS I've got rigged up here, so I need no critiquing on it, though if you feel you must, go ahead. Anyway, I was finishing the thing up tonight and realized that I missed one of the requirements for this final project (sloppy handwriting =( ). My main question is this: On each page I have a series of thumbnails, and one larger image at left. I would like to (either with addition to the CSS, or with not too much extra addition to each of the thirty some pages) create a hover effect wherein ONLY the larger image at left will load a larger version of the image on mouseover. I found a few examples on CSS tutorial websites but have been unable to correctly apply it. I am really in a jam and would appreciate any help anyone could give me on this. Additionally, (I know this one is really pushing it) I was not able to resize images, as I am on a new machine and a tight budget, so couldn't afford a copy of photoshop. Most of the images are already resized to 600 x 800 (downloaded from my photobucket account onto the new machine after the old died) but a few of them are larger sizes...so on the mouseover, is there a way to constrain all images to their correct proportions, regardless of filesize? I think this might be an impossibility but I thought it was worth the time to ask anyway (e.g. 600 x 800 images that are constrained to a smaller size, will pop over on mouseover to full 600 x 800, while images that may exceed those dimensions would still on mouseover pop over at a maximum of 600 or 800, whichever side is the largest, and the smaller size whatever it should be proportionally)?

I know this is really convoluted and probably sounds incredibly dumb, but most of us in the class have essentially self-taught ourselves, given how difficult our instructor is to follow in the classroom, so I've done everything on this project by trying to find examples in a pretty terrible text book.

Any help would be hugely appreciated.

I am pasting in the CSS sheet, as well as the code for an example page, so that someone might possibly be able to help me correct/add this.

If you are able to help, please be as explicit and obvious as possible, because I am having a hard time working this out on my own.

CSS:

html, body {
font: 11px "Arial", Lucida Grande, Verdana, Sans-Serif;
margin: 0;
padding: 0;
}


#container {
width:800px;
margin-left:auto;
margin-right:auto;
}


#header {
width:800px;
text-align:center;
margin-top:5px;
margin-bottom:5px;
}


#header h1 {
margin:0;
font-size:18px;
}


#breadcrumb {
list-style-type: none;
margin:0;
padding:0;
margin-left:auto;
margin-right:auto;
}


#breadcrumb li{
float:left;
color:black;
padding-right:3px;
}


#breadcrumb li a{
text-decoration:none;
font-style:italic;
color:black;
}



#nav {
list-style-type: none;
margin:0;
padding:0;
}


#nav li{
float:left;
text-align:center;
width:25px;
}


#nav li#pages{
width:700px;
font-size:14px;
}


#nav li a img{
border:0;
}


#content {
width:800px;
}


#large-image-frame {
width:400px;
float:left;
}


#large-image-box {
margin-top:5px;
padding-top:10px;
width:320px;
margin-right:auto;
margin-left:auto;
background-color:black;
padding-bottom:10px;
}


#large-image-box img{
display:block;
margin-left:auto;
margin-right:auto;
margin-bottom:10px;
}


#large-image-box span{
font-size: 12pt; display:block;
margin-left:auto;
margin-right:auto;
text-align:center;
height:60px;
width:300px;
background-color:white;
}


#thumbnail-box {
width:400px;
float:left;
}


#thumbnails {
list-style-type: none;
margin:0;
padding:0;
float:left;
}


#thumbnails li {
margin:0;
padding:0;
float:left;
}


div.small-image-box {
background-color:black;
width:110px;
margin-bottom:10px;
margin-left:15px;
text-align:center;
padding-bottom:5px;
padding-top:5px;
}

div.small-image-box img {
margin-bottom:5px;
display:block;
margin-left:auto;
margin-right:auto;
}


div.small-image-box span {
height:10px;
width:100px;
background-color:white;
display:block;
font-size:9px;
margin-left:auto;
margin-right:auto;
text-align:center;
}


#instructions {
width:800px;
}

a:link, a:visited, a:active { text-decoration: none }

a:hover { color: black;
background-color: white;
text-decoration: none;
border: 2px solid black; }








and the section of code which I would like the mouseover to be effective on:



<div id="content">

<div id="large-image-frame">

<div id="large-image-box">

<img src="images/OP06.jpg" width="94%" height="94%" alt="OP06" />

The section in red is where the image is that I would like to be able to mouseover for a larger (approximately 600 x 800 or 600 x _______/ or _____________ x 800, depending on proportions). Again, I'm desperate, and would be super super grateful for any help/pity any of you might toss my way. Thanks.