css masking in IE10

Question

I have this code which makes a background-image appear under a css mask.

.test-splash {
 height: 1000px;
width: 1000px;
display: block;
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(11%, -12%);
-webkit-mask: url("http://www.clipartbest.com/cliparts/aTq/9Er/aTq9ErbTM.svg");
mask: url("http://www.clipartbest.com/cliparts/aTq/9Er/aTq9ErbTM.svg");
-webkit-mask-image: url("http://www.clipartbest.com/cliparts/aTq/9Er/aTq9ErbTM.svg");
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
background-image: url(http://wemedia.com/wp-content/uploads/2008/12/istock_dandelionlarge.jpg);
background-position: 0 0;
background-position-x: center;
background-repeat: no-repeat;
z-index: 28;
}

And the html

<div class="test-splash"></div>

Here is a jsbin showing what I want to achieve

http://jsbin.com/lunoxo/1/edit?html,css,output

It's working fine in webkit and mozilla browsers but not IE 10. What do i have to do to make it work in that browser?

Answer 1

demo - http://jsfiddle.net/2wtbrsdq/

try using svg

<svg width="360" height="233" version="1.2">
  <defs>
    <mask id="svgmask2">
      <image width="100%" height="100%" xlink:href="http://s12.postimg.org/pzhdxcxb1/squirrel.png" />
    </mask>
  </defs>
  <image mask="url(#svgmask2)" width="100%" height="100%" xlink:href="http://wemedia.com/wp-content/uploads/2008/12/istock_dandelionlarge.jpg" />
</svg>