Layered CSS SVG masks not working - html

Question

I am working on a project where I have to apply 2 svg masks to a div. They are used to blend a large header image into the background on the right and left side.
The following is the HTML code I am using:
<div class="banner inner-slider">
<ul class="bx-slider">
<li class="mask" style="background-image: url('http://placehold.it/1440x610'); background-size: cover; background-position: center center;">
<div class="slide clearfix bigWrapper">
<div class="col-md-1"></div>
<div class="col-md-6 text-left">
<h1>Sample Header</h1>
<p>This is some sample header text. Wee! Isn't this fun?</p>
</div>
</div>
</li>
</ul>
</div>
My CSS is as follows:
.mask {
-webkit-mask-image: url('../images/mask-right.png'),url('../images/mask-left.png');
mask: url("../images/mask-right.svg"),url("../images/mask-left.svg");
-webkit-mask-size: 100% 100%;
-webkit-mask-position: center;
}
When I have this setup, neither mask is shown. If I break them out into individual classes (mask-left and mask-right) and assign both to the div, I get one or the other to show, but never both.
How do I get both masks to show?

Answer 1

I used this svg to great masking image with animation
Check the output here
<style type="text/css">.myClass { fill: url(#image); backenter link description hereground-size:contain;}svg{display:block;margin:0 auto;}</style>
<svg id="layer_1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="612px"
height="792px" viewBox="0 0 612 792" enable-background="new 0 0 612 792" xml:space="preserve">
<g id="Layer_2"><path id='triangle' class='myClass' fill="#151515" d="M38.668,249.994l-1.333,8.667c0,0-12.667,24.667-15,28S2.766,334.326,2.766,334.992
S-1.667,350.326,16,353.326s28,2.333,28,2.333s6.333,32.999,5.333,34.999s1,9.334,16,14.667c0,0-3.667,9.665-2,12.665
s13.333,12.999,18,13.333c0,0,8.667,3.334,3,8.667c0,0-14.333,32.664,13,45.997c0,0-7.333,9.998-16.333,11.665
c0,0-17.667,7.666-16.667,27.666c0,0-4.333,69.336,5,85.336c0,0,12.666,23.671,10.333,35.671c0,0,7,18.332,8.333,25.666
c0,0,2.667,30.671,6.667,37.671l9,42.337c0,0-17.667,31.669-19.667,40.002s155,0,155,0s-16.667-38.337-17.333-48.671
S209,715.994,209,715.994s-16-58.668-5-76.334s20.667-15.669,38-38.669c0,0,16.667-18.006,19.667-18.006c0,0,9-11.67,10.333-22.003
v-44.667c0,0,30.332,24.334,34,28.667c0,0-7,17.333-7.334,22c-0.332,4.667,3.335,7.333,4.668,7.333
c1.332,0-0.741,12.334,4.129,18.334c4.869,6,5.203,3.333,5.203,3.333s-6.332,12.334,3,33.667c0,0,2.335,7.669-1,10.335
c-3.334,2.666-2.334,17.334,2.334,23.334c0,0-10,26.338-11,36.338s-1.063,18.333,1.136,20s-7.47,15.675-6.802,19.008
c0.666,3.333-6.334,15.334-6.667,20S285,792,285,792l327.159-0.096L612,365.5c0,0-46.5-20.5-83.5-28c0,0-53-15-64-22
c0,0-25.5-27-27-33s20-30,0-73.5c0,0,1-28.5-7.5-37c0,0-1-49-25-82.5s-42-67.499-99-90.833L188.667,0c0,0-35,6.667-47.333,19.001
c0,0-25.667,8.333-39,13c0,0-38.667,14.667-45.333,15c0,0-60,20.333-32,63c0,0,5.333,11.667,25.667,19c0,0-12,27.997-13.667,39.664
s-9.333,42.333-9.333,44.333s1,17.996,2.333,19.329"/>
</svg>
<svg>
<defs>
<pattern patternContentUnits="objectBoundingBox" id='image' width="3.4" height="1" viewBox="0 0 100 100" preserveAspectRatio="none">
<image patternContentUnits="objectBoundingBox" xlink:href='img/loop.jpg' width="100" height="100" preserveAspectRatio="none">
<animate attributeType="XML"
attributeName="x"
from="-60" to=".2"
dur="100s"
repeatCount="50"/>
</image>
</pattern>
</defs>
</svg>
[This is how it looks][1]