See http://artdemo.tripod.com/sketch/tableTestCSS.html and http://artdemo.tripod.com/illustration/indexCSS.html demos and Eric Meyer's http://meyerweb.com/eric/css/edge/popups/demo.html explanation of how the HOVER/SPAN works.
In every case, the "caption" text is a span element inside the actual hyperlinks. Here's one example from the source of this document:
<a href="http://www.meyerweb.com/eric/css/">Links<span>A collection of things which interest me, and might interest you</span></a>
To prevent the text from showing up when the page loads, I have the following style:
div#links a span {display: none;}
So they're gone, removed entirely from the document flow. Bringing them back, then, is a simple matter of switching the display to block and positioning the element whenever the associated link is hovered over with the mouse pointer. Thus we get the first two lines of this rule:
div#links a:hover span {display: block;
position: absolute; top: 200px; left: 0; width: 125px;
padding: 5px; margin: 10px; z-index: 100;
color: #AAA; background: black;
font: 10px Verdana, sans-serif; text-align: center;}
The last three lines relate to how the element will be styled when it appears, but the first two cause it to be made visible (display: block;) and position it appropriately.
I've recently used this technique to annotate a renowned illustrator/painter's bio with images. (There were 71 images referenced, which takes a lot of bandwidth, so I'm not going to give you a link.)
Basically you use relationship of CSS POSITION: RELATIVE reference point of link and POSITION:ABSOLUTE hover/span images and change <span> from display: none to display: block when reference point link is hovered over.
I think what you want is more like http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm or my simpler version used at http://www.gerigeans.com/spsu09/index.html or http://www.auntnini.com -- wherein the onMouseOver and/or onclick changes the large image [name-"holder" id="holder"] "<img src="____.jpg"> source. The auntnini version is old and needs to be cleaned up, but onMouseOver the text changes .JPG and onClick initiates the animated .GIF. You can also add onMouseOut to change the large image "holder" to an entirely different image.
<script language="JavaScript" type="text/javascript">
<!-- Adapted from www.morgangaynin.co
//LARGE IMAGES
pic01 = new Image()
pic02 = new Image()
pic03 = new Image()
pic04 = new Image()
pic05 = new Image()
pic06 = new Image()
pic01.src = "images/img-01.jpg"
pic02.src = "images/img-02.jpg"
pic03.src = "images/img-03.jpg"
pic04.src = "images/img-04.jpg"
pic05.src = "images/img-05.jpg"
pic06.src = "images/img-06.jpg"
//THUMBNAILS
pic01a = new Image()
pic02a = new Image()
pic03a = new Image()
pic04a = new Image()
pic05a = new Image()
pic06a = new Image()
pic01a.src = "images/img-01a.jpg"
pic02a.src = "images/img-02a.jpg"
pic03a.src = "images/img-03a.jpg"
pic04a.src = "images/img-04a.jpg"
pic05a.src = "images/img-05a.jpg"
pic06a.src = "images/img-06a.jpg"
</script>
In <BODY> <!--LARGE HOLDER IMAGE do not include width or height-->
<img src="images/holder.jpg" name="holder" id="holder" alt="Holder">
<p id="text">inner.html</p>
Code on thumbnails:
<a href="#nogo" target="space" onMouseOver="document.holder.src=pic01.src; document.getElementById('text').innerHTML ='Photographer name 01'" title="Photographer name 01"
onClick="document.holder.src=pic02.src"
onMouseOut="document.holder.src=pic03.src">
<img class="thumb" src="images/img-01a.jpg" alt="pic01"></a>
<a href="#nogo" onMouseOver="document.holder.src=pic02.src">
<img class="thumb" src="images/img-02a.jpg" alt="pic02"></a>
<a href="#nogo" onMouseOver="document.holder.src=pic03.src">
<img class="thumb" src="images/img-03a.jpg" alt="pic03"></a>
<a href="#nogo" onMouseOver="document.holder.src=pic04.src">
<img class="thumb" src="images/img-04a.jpg" alt="pic04"></a>