From a quick look, the only problem I see is that <span> is not the right element to use here. It's what's known as an inline element—meaning that it belongs inside another block-level element like a <p>. HTML4 and under does not allow an inline element to wrap around a block element like a div.
In this instance, you don't need the extra element anyhow. You can just do this:
and then the JS can be a tad simpler:
<img src="gallery/turtle-bite.jpg" width="400" height="258" alt="A turtle swims..."/>
<p>This turtle was spotted swimming around the Great Barrier Reef ...</p>
// Making the gallery captions appear on hover