I'm trying to create an effect but I don't have much experience with jQuery.

 

The site I'm working on uses FancyBox and within a popup that I've created, there is an image which needs to stay in it's position but upon hovering, I want it to enlarge the image but it needs to sit on top of the fancybox popup.

 

I understand that I could use addClass to change the positioning but I also want a smooth 'zoom' type effect as well, so what would be the best way to achieving this?

 

Hopefully that made sense, I've drawn up a couple of (crude) images to help.

 

 

Actually, just realised I won't be able to do it this way because FancyBox uses an iFrame. So I'm going to do a simple animate on hover but I have another slight problem.

 

I want to fade everything else out while the image resizes, but if I add another animate in the hover state, both hover and hover out are animating. Not quite sure why.

 

My code is here:

 

$('a.zoom').hover(function() {

$this = $(this);

$this.children('img').animate({

width: '452px'

});

$this.siblings().animate({ opacity: 0.25 });

}, function() {

$this = $(this);

$this.children('img').animate({

width: '142px'

});

$this.siblings().animate({ opacity: 1 });

});