$(document).ready(function(){

  //get the width
  var oWidth = $('img.resize').width();
  //get the height
  var oHeight = $('img.resize').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);
  mpx = mpx * 3;
  //run a function when the image is hovered over
  $('img.resize')
    //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',
          left : "-730px"
        //space the animation out over 1 sec (deals in milliseconds)
        },1000);

    },
    //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',
          left: "0px"
        },1000);
    });
});