Tear drop (mask?)

[chrisburton]

@dfogge Incredible, thank you! Is there any possible way to support IE9+?

[Andy Howells]

Am I right in saying that this code basically;

• Replaces the image src with the mask.
• Adds a CSS background of the original image to the element.
• Mask has a hole in it in the shape of what you want? (Transparent).

[chrisburton]

Even if that’s the case, the way my markup has to be (inline images), it works perfectly for using the Twitter API and masking the avatars. If somehow I could support IE9+, my problem would be solved.

[dfogge]

yes, that is indeed what its doing andy. the catch is your background needs to be a solid color and match the color of the mask.

chris, i’m not sure why the codepen demo is not working in IE, but check it out in the original author’s jsfiddle demo: http://jsfiddle.net/rjzaworski/dpetM/3/

looking good to me on ie8, 9 and 10.

i remember when i used it i didnt have any issues with IE, and this was when i was still testing for ie7.

[chrisburton]

Ah, thanks for saving the day @dfogge.

[Andy Howells]

@chrisburton – Working fine for me in IE8-10.

@dfogge – cheers for confirming for me, just was trying to wrap my head around what the JavaScript was actually doing.

[dfogge]

all credit due to RJ Zaworski, but glad to help!

[chrisburton]

@andy_unleash Yeah, for some reason I had compatibility mode on.

[Author]

Posts