IE7 a:hover doesn't work - fine in Safari, FF

Hi everyone,

I'm trying to implement a JS gallery (http://smoothgallery.jondesign.net/), which is going fine except for a problem in IE7. When you mouseover a link, an image should appear via use of the :hover pseudo-class to change the image opacity from 0 to 0.8 (or 80, depending on your currency!). It works fine in Safari and Firefox, but doesn't do anything in IE7. If someone could look at the attached code and/or the example at:

http://www.punkrockportraits.com/pages/gallery.php?id=8

I would be very grateful. I've included "zoom", "width" and "position" as possible fixes mentioned elsewhere, but have had no luck whatsoever.

/* Image is not visible normally */
.jdGallery a.right, .jdGallery a.left
{
	position: absolute;
	height: 99%;
	width: 40%;  /* Adjust this for width of arrow link (HWW) */
	cursor: pointer;
	z-index:10;
	filter:alpha(opacity=0);
	-moz-opacity:0.0;
	-khtml-opacity: 0.0;
	opacity: 0.0;
}
 
/* Image SHOULD become visible on :hover */
.jdGallery a.right:hover, .jdGallery a.left:hover
{
	filter:alpha(opacity=80);
	-moz-opacity:0.8;
	-khtml-opacity: 0.8;
	opacity: 0.8;
	width: 100%;
	zoom: 1;
	position: absolute;
}

Select allOpen in new window