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:
- Paste an image on the canvas.
- Create a new Frame which should mask the image.
- Drag the image into the Frame.
Drag the image to 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