Do you want to add a mask to images in WordPress? Masking crops your image into a custom shape, such as a circle, hexagon, or any SVG outline, making your visuals stand out compared to standard rectangular images.
The Advanced Image block in Nexter Blocks lets you apply a custom image mask in the WordPress Block editor (Gutenberg) without writing any code.
To check the complete feature overview documentation of the Nexter Blocks Advanced Image block, click here.
Best Used For:
- Portfolio sites where project thumbnails need a shaped, on-brand frame instead of a rectangular crop
- Agency and design websites showcasing work in custom shaped image frames
- Product landing pages where images need a polished visual treatment that matches your brand identity
Requirement — This block is a part of Nexter Blocks. Make sure it is installed and activated.
To add an image mask, add the Advanced Image block to the page and follow the steps:
1. Add your image in the Upload Image section.
2. Enable the Mask Image Shape toggle from the Special Options tab. The masking option is in the Special Options tab, not the main Content tab.
3. Add your mask shape file in the Mask Image section. Any PNG or SVG file with a transparent background works as the mask shape. The visible part of your image fills the non-transparent area of the mask file.
You can also add a custom drop shadow to the masked image from the Box Shadow section. Use this when the masked image sits on a light-colored background and you need depth to visually separate it from the page.
Your image now shows in the masked shape.
For more image effects with Nexter Blocks, see how to add a parallax image in WordPress. For a text version of the masking technique, see how to create a text mask effect in WordPress.
