Search code examples
htmlcsssvgmask

svg mask on jpg not working

What am I doing wrong?

<style>
  .masked-element {
    mask-image: url(images-free-tour/cauldron/mask.svg);
    mask-mode: alpha;
  }
   .masked-element image {
    mask: url(images-free-tour/cauldron/mask.svg);
    mask-mode: alpha;
  }
</style>

And here is the image in the body of the page

    <img class="masked element" src="images-free-tour/cauldron/cauldron-angel-640.jpg" />

I've tried doing this lots of different ways none of them work, the mask is supposed to allow the page background through, it doesn't. Help!

Solution

  • Presumably, where you are going wrong is, not testing in Firefox (which is the only browser that supports it).

    Chrome and Safari have limited support via the -webkit- vendor prefix. Microsoft browsers do not currently support it at all.

    Additionally, the selector to match <img class="masked element"> is img.masked.element and not .masked-element image.