$(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 = ( oHeight/ oWidth )*4;
 
 //run a function when the image is hovered over
 $('img.resize')
  //mouseOver effect
  .hover(function(){
   //take the currently targeted img

   $(this).css({'z-index' : '10'});
   $(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)
    },1000);
  },
  //this is just like a mouseOut effect to take the img back to the original size
  function(){
   $(this).css({'z-index' : '1'});
   $(this)
    //stops the event from happening in case of an abrupt mouseOut
    .stop()
    .animate({
     width: oWidth +'px',
     height: oHeight +'px'
    },200);

  });
});