$(function() {
    //get the width
    var oWidth = $('img.img_grow').width();
    //get the height
    var oHeight = $('img.img_grow').height();
    //we want to preserve the proportions of the image, so we get the multipler (you could always multipy the multiplier to get a large image
    var mpx = (oWidth / oHeight)*1.5;
    
    //run a function when the image is hovered over
    $('img.img_grow')
        //mouseOver effect
        .hover(function(){
            //take the currently targeted img
            $(this)
                //stops the event from happening in case of an abrupt mouseOut
                .stop()
                //custom animation effect to change the width and height of the img
                .animate({
                        //take the original width/height X multipler and tag on the 'px'
                        width: (oWidth * mpx) +'px',
                        height: (oHeight * mpx) +'px'
                //space the animation out over 1 sec (deals in milliseconds)
                },500);
            working_id = $(this).attr("id")+"-text";
            $("#"+working_id).addClass("black");
        },
        //this is just like a mouseOut effect to take the img back to the original size
        function(){
            $(this)
                //stops the event from happening in case of an abrupt mouseOut
                .stop()
                .animate({
                        width: oWidth +'px',
                        height: oHeight +'px'
                },500);
            working_id = $(this).attr("id")+"-text";
            $("#"+working_id).removeClass("black");
        });
});