Jquery: Unmasking/Revealing Corner

Question

Hi,

I am working on this site: http://waterwing.waterwing.ca/ And as you see the top right corner, when you hover over it, will expand.

I need to change this effect to an extent. It will need to slowly reveal/unmask the rest of that darker trangle when you hover as opposed to expanding it.

This site has a good example: http://www.sohtanaka.com/web-design/examples/peeling-effect/ But the way they did it was with a page curl image and the rest transparent so the image just covers/masks the underlying message, and that is what expands.

I want to achieve this exact effect but WITHOUT the page curl, but that's making it difficult because I can't mask it the way they did since I don't want a page corner image and my background is a gradient.

The jquery looks like this right now:

$("#corner").hover(function() {
     $("#corner img").stop()
      .animate({
       width: '250px', 
       height: '251px'
      }, 500); 
     } , function() {
     $("#corner img").stop() 
      .animate({
       width: '50px', 
       height: '52px'
      }, 220);
    });

Any help would be much appreciated.

Thanks,
Wade