This isn't really a mask in the more commonly perceived digital graphics sense, in it's not actually creating transparent negative space around your image. The "masked" area is still a solid color, in this case white.
It would be more appropriate, and less flashy, to call this PNG matting, because it's far more analogous to cutting a matte (overlaying a paper stock frame over your artwork to shape it's borders) than it is to an actual mask (using an overlaid shape to actually define a new transparent alpha channel for your image)
Webkit's actual masking is considerably more flexible. For instance, you can use one image as a mask, then color it (by setting the background color) to whatever you want… then varying the opacity… and it doesn't only work on solid backgrounds. (This is PERFECT for close buttons on your notifications, if you use e.g. green for success and red for failure, and now you don’t need to fire up an image editor when you tweak the color palette or add another class of notification.)
If you were wondering, this is one of the techniques involved in making the awesome zoom at DISQUS.com (disclaimer: I didn't make it, just investigated it through Chrome Developer Tools :)
By "zoom", I'm assuming you mean the zoomed-in-on-hover effect on the illustration on http://disqus.com. (I was a little confused as to what you meant until I went looking.)
To answer the question: it's done by having a 120px square div that:
Thanks! I assume that the border-radius is what causes the image to appear round like that. Do you think it works in all the major browsers which support rounded corners? FF, IE8+, and WebKit?
Also I think there is one more factor
* The background position is probably being controlled by javascript as well
border-radius will work on Firefox and Webkit (but you'd best include the -moz and -webkit versions as well, for older versions that don't pay attention to the plain attribute).
I'm pretty sure @ckj did that. I've sent him a link to your question. He also used the same technique for our 404 page on Pixelcloud. http://pixelcloud.com/404/
Oh man, that guy is good. Chris Jennings. I wonder if he would do consulting work for another company? How did he work for pixelcloud and disqus? I would really like to reach out to him about possibly designing stuff for Qbix.com if he's interested.
It can be an appropriate effect (and look good). Here's an example: http://www.fox8.tv/
(Click the carousel, and watch the FOX8 logo up top-left. In this case it's just a clear window to the large background beneath it, but it's the same idea.)
It's not frequently used, but if all you need is a square, the css
clip: rect(t,r,b,l);
works well. I've used it to create a sort of "expand/contract" effect. But you can use it for masking as well (true masking, the background behind it shines through).
I imagine you can just use the same preloading techniques as always -- create an image sprite of both background images and set different top/left coordinates in the style, or load images into non-displayable elements or unused variables in javascript.
It would be more appropriate, and less flashy, to call this PNG matting, because it's far more analogous to cutting a matte (overlaying a paper stock frame over your artwork to shape it's borders) than it is to an actual mask (using an overlaid shape to actually define a new transparent alpha channel for your image)