How To Use Image Masks
Last Update: March 28, 2024
Image Masks are a great new feature in the Image Element to easily enable you to constrain your images to only display through a shape, or a mask. There are lots of different masks you can apply to your images, and you can even upload your own custom masks. Let’s have a look at how this works.
Mask Selection
You will find the Mask options on the Design tab of the Image Element. Currently, there are eighteen different masks to choose from, as well as the ability to upload a custom mask.
To enable a mask for your image, simply select one of the prebuilt masks. The mask will be applied and you can then further customise its shape and position with the other mask options. To use a custom mask just click on Custom, which is the last Mask in the set, and then you can upload an image to be used as the mask. Just note that the image should be in SVG or PNG format with a transparent background.
Mask Size
Once you have selected the mask, there is an option for mask size. The possible selections here are Fit, Fill, or Custom.
Fit is the default, and allows the full mask to display by ‘fitting’ it to the height of the column.
Fill allows the mask to fill the width of the column.
Custom triggers a new option called Custom Size, which allows you to specify a size (any valid CSS unit) for the mask. The example below on the right is set to 70%.
Mask Position
Mask Position is the next option, which positions the mask over the image, and allows you to display different areas of the image. Here you have a choice of Top Center, Top Left, Top Right, Center Center, Center Left, Center Right, Bottom Center, Bottom Left, Bottom Right, and Custom.
If you choose Custom, a new option appears called Custom Mask Position, where you enter values in pairs, first for the X axis, and secondly for the Y axis, as coordinates for the position ex. 60% 50px.
Below from left to right, we have Center Center, Center Left, and Center Right. Note how different areas of the image are showing through the mask.
Mask Repeat
Depending on the Column size and the image, you might also want to employ the last Mask option, Mask Repeat. Here you have a choice of No Repeat, Repeat, Repeat X, Repeat Y, Space, and Round.
Below is an example of using the Repeat option, combined with a Custom mask size of 90px. There are many ways to use this feature, depending on your image, mask and desired outcome. As always, the best way to get to know a feature is to experiment. Go Wild!
