Is it possible to use an SVG to mask an image?

How To
1

Is it possible to use an SVG to mask an image? I would like to use an svg of a heart to mask a photo, like this.
image-heart-mask
I appreciate your help.

1 Like
2

Also wondering if it’s possible to use an SVG to mask an image.

3

Yes.

Use a class like this:

 .cta--mask  {
        -webkit-mask-image:url(/wp-content/uploads/2022/11/cta-shape.svg);
        -webkit-mask-position:center center;
        -webkit-mask-repeat:no-repeat;
        -webkit-mask-size:contain;
      
        mask-image:url(/wp-content/uploads/2022/11/cta-shape.svg);
        mask-position:center center;
        mask-repeat:no-repeat;
        mask-size:contain;
        overflow: hidden;
    }

You need to upload the svg shape you want to the medialib and fix the path.

based on Supamikes Tutorial: Masking images & videos in CSS

4

Now introduced in core Bricks, since v1.8.5: https://www.youtube.com/watch?v=vYz5_3MRD5k