title: How can I create a "zoom" effect using jQuery and switching the source image?
body: <p>I have an array of images that get on the browser and when the user hovers over them I have this effect occur:</p>
  
  <pre><code> $('.thisImage').hover(function(){
              zindexnr++;// Bring picture to the foreground
              var cssObj = { 
                  'z-index' : zindexnr,
                  '-webkit-transform' : 'rotate(0deg)',
                  '-webkit-box-shadow' : '#888 5px 10px 10px'
              };
              $(this).css(cssObj);
          }, function(event, ui){
              var tempVal = Math.round(Math.random());
              if(tempVal == 1) {
                  var rotDegrees = randomXToY(330, 360); // rotate left
              }else{
                  var rotDegrees = randomXToY(0, 30); // rotate right
              }
              var cssObj = { 
                  '-webkit-box-shadow' : '',
                  '-webkit-transform' : 'rotate('+ rotDegrees +'deg)',
              };
              $(this).css(cssObj);
          });
  </code></pre>
  
  <p>The images rotate pretty nicely and have a good drop shadow. But what I want to do is to change the source of the image from a thumb-sized one to a big one and make it seem as if the image were zooming (as much as possible). How can I make the latter?</p>
  
  <p>Also, would it be a good idea to preload the big images as well?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>I should say I already looked around some posts in SO but didn't find any that quite did what I want to. Hence I'm asking.</p>
  
  <p>JS Fiddle: <a href="http://jsfiddle.net/WatTA/" rel="nofollow">http://jsfiddle.net/WatTA/</a> so you guys can see what I've got so far =)</p>