Masking an Image

In Framer, elements such as images can be masked with the Overflow property.

The Overflow property determines whether an element will show any content that exceeds the element's dimensions. This allows us to decide if we want to clip the area that overflows our element or not.

One of the ways to access the Overflow property on a Frame is in the right-hand properties panel, where it is set to Hide by default.

Tip: the moment you drag an element in a frame, it will automatically understand you are trying to mask so Overflow will be set to Show.

Select the image you would like to mask

How to mask an image

An element can be masked by dragging it into a target Frame. An image, for instance, could be masked in the following way:

1. Paste an image on the canvas.
2. Create a new Frame which should mask the image.
3. Drag the image into the Frame.

Tip: it is also possible to directly apply an image fill to an element. Under the Properties panel, select the Fill property, open the color picker and click the the Image icon.

Apply an image fill to an element