how to move lower z-level element below transparent png
<p>I have the following website that lets me scale an image and crop it and stuff.  You can drag and pan the image around:</p>

<p><a href="http://thindery.com/jsfiddle/crop_move.html" rel="nofollow">http://thindery.com/jsfiddle/crop_move.html</a></p>

<p>I wanted to try to implement a mask over the top, which I did here:</p>

<p><a href="http://thindery.com/jsfiddle/crop_mask1.html" rel="nofollow">http://thindery.com/jsfiddle/crop_mask1.html</a></p>

<p>Problem is that because the mask.png covers the whole butterfly.img, I can't drag and pan the image anymore.  I'm trying to think of a way that I can put the mask over the top, but still be able to move the source image around.</p>

<p>Does anybody have some ideas, thoughts, or suggestions of stuff I can look into?</p>
