Witam
Mam następujący problem
Probuję zrobić powiększanie obrazka po najechaniu na niego myszą.

Mam 5 obrazów i po najechaniu na nie kursorem pojawia się każdy w powiększeni oraz wyśrodkowany względem ekranu.
Problem polega na tym, że powiększony obraz zawsze jest nad trzecim obrazem i efekt nie działa po najechaniu właśnie na tzreci obraz (ułożone są one w rzędzie)

Mój kod:

[HTML] pobierz, plaintext 
     $('.img-ref img').each(function(){
    $(this).hover(function(){
        var src = $(this).attr('src');
        if (src != $('.zoombox img').attr('src').replace(/\?(.*)/,'')) {
            $('.zoombox img').stop().css({'transform':'scale(1.5,1.5)'}).animate({opacity:'0'},function(){
                    $(this).attr('src',src+'?'+Math.floor(Math.random()*(10*100)));
            }).load(function(){
                    $(this).stop().animate({opacity:'1'},500);
            });
        }
        return false;
    },function(){
       $('.zoombox img').stop().animate({opacity:'0'},500)
 
	   })
 
 
});
[HTML] pobierz, plaintext 

link do strony, aby sprawdzić o co dokładnie chodzi (obrazy z referencjami u dołu ekranu): http://www.wtrakciepracy.pl/accent/zaufali-nam/

Z góry dzięki za pomoc
Rafał

Zależy, co chcesz uzyskać, jeśli nie razi Cie to, że powiększenie jest cały czas na wierzchu, możesz dodać do custom.css

[HTML] pobierz, plaintext 
.zoombox img{
  pointer-events: none;
  /*...*/
}
[HTML] pobierz, plaintext 

Wtedy po najechaniu na miejsce, gdzie jest 3 obrazek zostanie on powiekszony.

Jeśli chcesz, aby powiekszony obrazek znikał spróbuj użyć mouseenter i mouseleave zamiast hover