Animating an absolutely positioned div on top of a carousel on mouseover

I've got a simple carousel implementation which I'm trying to tweak a bit to match some very specific requirements.

There is an absolutely positioned overlay which highlights the first thumbnail of the carousel when the page first loads up.

开发者_运维技巧

When the mouse is moved over to another visible thumbnail in the carousel, I need it to slide across to that thumbnail, and update the text within the overlay to the new image number (out of x number of images).

Now, I have spent nearly a full day trying to get the animation to happen nicely. I've tried with multiple approaches, and I'm getting quite frustrated. It is probably due to my lack of CSS3 ninja-ness.

Here is a fiddle for the relavant HTML, CSS and jQuery carousel implementation which needs a working version of the slidy-boxy thing described above.

---

Here's an updated version of the fiddle. Code is as follows for the <img> mouseover event:

// References to commonly used elements
var $ul = $(".carousel ul");
var $overlayImageCounter = $('.overlayImageCounter');

// Original offset of the overlay.  Use it to correct the position we'll be
// moving it to over each image.
var offset = $overlayImageCounter.position().left;

// Mouseover binding go now!
$(".carousel img.galleryThumb").mouseover(function() {

    // The image that triggered our mouseover
    $img = $(this);

    // Animate the overlay to the image's left position.
    // Correct for carousel's current left margin and overlay's original offset
    $overlayImageCounter.stop().animate({
        left: $img.position().left + parseInt($ul.css('marginLeft'), 10) + offset
    });

    // Update the text of the overlay
    $imageCounter.text($ul.find('img').index($img) + 1 + "/" + nThumbs);

});

The last bit of the code that would need to be tweaked is resetting the overlay's left position on the carousel's prev/next actions. I didn't add this bit but it's just a matter of animating the left property to its original offset.