Search code examples
htmlcssmaskimage-gallery

How can I create a mask on an HTML Object?


I have seen in the apple site their big-images gallery in this link (for example):

http://www.apple.com/imac/

What attracted my eyes was that they sort-of masked these images so they will not be displayed outside the gallery box. In flash/as3 it is quite simple to mask an object - but how did they do it in the web?

How does it work?


Solution

  • Well it's often done by making the image the background of a div. This div has hidden overflow, and the background image is centered in it. Within the div theres a img element which is a transparant png that can be used as the mask.