Framer
  • Support
  • Using Framer
Framer
  • Why Framer
  • Teams
  • Learn
    • Tutorials
    • Examples
    • Templates
    • Sessions
    • Speedruns
  • Pricing
  • Blog
  • Updates
  • Support
  • Support
  • Using Framer

Related Articles

  • Why are my animations in iOS not smooth?
  • Can I still use Framer Classic?
  • What the new Smart Components mean for legacy Design Components
  • Why am I seeing background blur artifacts?
  • Changes to Framer

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

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.

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

Apply an image fill to an element

Helpful?Was this article helpful?

0

0

Framer

  • Why Framer
  • Teams
  • Pricing
  • Blog
  • Updates
  • Motion

Platforms

  • Web
  • macOSbeta
  • WindowsBeta
  • iOS
  • Android
  • Figma Importing
  • Sketch Importing

Learn

  • Tutorials
  • Examples
  • Templatesnew
  • Sessions
  • Speedruns

Resources

  • Packages
  • API
  • State of Prototyping
  • Desktop Prototyping
  • Prototyping Tool
  • Mockup Tool
  • Wireframing Tool
  • UI/UX Design Tool
  • Graphic Design Tool
  • User Testing

About

  • Loupe
  • Community
  • Company
  • Careers
  • Legal
  • Security

Support

  • Using Framer
  • Accounts
  • Contact

  • Twitter
  • Discord
  • Dribbble

Copyright © 2021 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement