Accessibilty issue using the hover psuedo class on image gallery

Hi,

I have a css Image gallery that uses an absolutely positioned span that initially is set to hidden to hold the larger image and using the psuedo class hover property to set the span to visible when the cursor is placed over the thumbnail image which I have set as a link so that it can access the hover property.

css code:

/* Css document for Image viewer */

.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
height: 900px;
}

.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px solid #fff;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #ccc;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 170px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

p {
margin: 30px 50px 20px 50px;
padding: 0;
}

html:

CSS Image Viewer
@import "image_expander.css";

Pete's last day

Catstycam and Brown Cove

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris porta eleifend mauris. In id lorem eget velit vestibulum vehicula.
Pellentesque congue tempor arcu. Curabitur lorem. Vivamus commodo fermentum urna.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris porta eleifend mauris. In id lorem eget velit vestibulum vehicula.
Pellentesque congue tempor arcu. Curabitur lorem. Vivamus commodo fermentum urna.

Suspendisse varius neque a purus. Vestibulum ornare interdum augue. Donec tempor arcu non felis.
Mauris congue risus ac dui. Pellentesque aliquam pede tempor massa.

Fusce sit amet enim. Nulla vestibulum mauris quis ante. In quis pede. Aliquam dui. Donec adipiscing est id ligula.
Phasellus et massa a eros facilisis venenatis.

This works perfectly but I need to set something up so that it is accessible using the keyboard only to make the site AA Accessibility compliant.

Normally I would write a JavaScript function that was called from within the onkeypress property but this is not allowed by the client.

I have searched around for a solution with no success.
Can anyone help please?

Thanks