How to apply an image layer mask?
BOWWE tutorials
Welcome to our collection of online lessons. We’ve created these to help you learn the best practices and get the most out of BOWWE. Come back here whenever you want!

How to apply an image layer mask?

Transform your website's visual appeal with the magic of image layer masks using our easy-to-follow tutorial! In this comprehensive guide, we'll walk you through the process of seamlessly adding image layer masks in your favorite no-code website builder, empowering you to create stunning, professional-grade designs without any coding expertise.

What image mask can look like on your website?

The image layer mask is an additional container located within the constraints of the image itself. Its main function is to provide the user with a stylable canvas to make placing elements with pictures easier.

The most common usage for the mask is making it slightly darker with a semi-transparent color and providing texts with a Call To Action, like in the case of an opening banner.

Another common application for the image mask is to have its content hidden by default only to reveal it with the mouse hover. This little animation can greatly improve User Expierience on your website.

How to create image mask in BOWWE?

1

Open your project in BOWWE

2
Add image to your website
3

Go to the Image Widget Settings

4

Click on the Show mask checkbox. A new layer called Image container will appear on your website. It will allow you to add new widgets on top of your image and give you a wide range of customization options in Widget Styles. 

5

Go back to the Creator in the left side panel and choose among available widgets what you want to add to the image mask. Once you’ve chosen the widget, drag & drop it in the image container that appeared after creating a mask

6

Adjust the widget with Widget Styles

7

SAVE and PUBLISH to complete

Congratulations!
Now you know how to create image mask