Image masking

Question

I am trying to make this image using css with two masks, but I am getting absolutely nowhere. Ive tried using the sample code on this page:

http://www.ajaxandicons.com/2010/04/image-masking-with-css/

My two images:

and

I can not make it work for life. Can someone jsfiddle or put a working result here, showing me how to properly mask the image?

Answer 1

You can mask this in Safari and Chrome using a -webkit-maskCSS3 property similar to this ( see script in Safari / Chrome ):

<img src="http://i.stack.imgur.com/oJUzS.jpg" 
     style="-webkit-mask:url('http://i.stack.imgur.com/4KEpA.png')" />

- - .png-, CSS.

Answer 2

? http://jsfiddle.net/6dRSh/

HTML

<div id="image"><img src="http://i.stack.imgur.com/oJUzS.jpg">
    <div id="mask"><img src="http://img148.imageshack.us/img148/4645/4kepa.png" ></div>
</div>

CSS

#image {position:relative;}
#mask {position:absolute; top:0;}