.hover() is not always working for me

JavaScript
1

I have the difficult task of getting this right, and I hoped you could help. The page I’m working on is here.

The homepage images are using the .cycle() plugin, which has been great. Once an image has finished fading in, I’m adding a class of .current to that image.

The company logo stays on top and the images cycle underneath (using z-index).

When hovering over the product image, I’d like the logo to get out of the way and for the product title/link to appear.

It’s working , but it’s spotty and not so well done. I’m out of ideas and I’d like to see if you have a better way of doing this, which works more solid - meaning the expected result happens all the time!

Here’s the script so far (on the page, the code is baked in above the image div’s):


$(function() {
	$('.slideshow').hover(
		function(){
			$('.logo').css('z-index', '1');
			$('.current .slide-meta').fadeIn();
		},
		function(){
			$('.current .slide-meta').fadeOut();
			$('.logo').css('z-index', '20');
		}
	);
	$('.slideshow').cycle({
		fx:     'fade',
		speed:   1000,
		timeout: 4000,
		pause: true,
		before: function(){
			$(this).parent().find('div.current').removeClass('current');
		},
		after: function(){
			$(this).addClass('current');
		}
	});
});

Thanks for your input.