Images being pulled from a database, wanting to add a jquery large image hover...Is it possible?

I am trying to accomplish adding a hover over the shirt images (images generated from a database) on each shirt on the home page to make them larger before they click on it to go to the zencart to purchase a shirt. Is this possible?

The website is http://www.10before6.com

I tried using this jquery script: http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery

but was unable to get it work.

Does anyone have any ideas?

If you just want to grow the image on hover, and not use a new image, you can do something like this:

$('#yourImage').hover(function() {
    $(this).animate({     
        width: 400,     
        height: 400    
    }, 1000);
});

That will grow the image on hover. You can add another function to the hover event which will run when the cursor moves off the element.

Note that your images will need to be positioned absolutely for this to work without pushing your other content around as the image grows.

See an example in this fiddle.

write a piece of javascript like this

$("#MyImageID").live("hover", function{}(
   $.post("RestfulServiceURL", function (data){
      $("#HoverDiv").html(data); 
   });
)};

Data is the link of the larger image. If its being pulled from the database you have to create a mvc method that kicks out the mime type of an image, or use a ashx file, or resful wcf service to serve up the image.