Webflow Image Masks: Crop, Clip, and Overflow Hidden

Open the Add Elements panel (A) → Structure → Div Block and drag it onto the canvas. Give it a class name like 'image-crop-wrapper'. In the Style Panel (S) → Size section, set a specific Width (e.g., 400px) and Height (e.g., 300px). This container defines your crop frame — the image inside will be clipped to exactly these dimensions. Use the Ratio setting (Style Panel → Size → Ratio) to lock an aspect ratio like 4:3 or 16:9 instead of a fixed height if you need responsive behavior.

With the Div Block ('image-crop-wrapper') selected, go to Style Panel (S) → Size section → Overflow dropdown. Change the value from Visible (default) to Hidden. This is the key step — any child element that extends beyond the div's boundaries will be clipped and invisible. You can also set overflow-x and overflow-y independently if needed, but 'Hidden' applies to both axes at once.

From the Add Elements panel (A) → Basic → Image, drag an Image element inside the 'image-crop-wrapper' div. Assign an image from your Assets in the Element Settings Panel (D) → Source. Then select the image and go to Style Panel → Size → Width: 100%, Height: 100%. Next, set Style Panel → Size → Fit to Cover. This makes the image fill the container completely while maintaining its aspect ratio, cropping any overflow. Use Style Panel → Size → Object Position to control which part of the image is centered in the crop window (default is center center).

With the 'image-crop-wrapper' div selected, the container must be a perfect square (equal Width and Height, e.g., 200px × 200px, or use the Square ratio preset in Style Panel → Size → Ratio → Square). Then go to Style Panel (S) → Borders → Border Radius. Click the 'all corners' input and type 50% (or use the % unit selector). The container — and all overflow-hidden content inside — becomes a circle. This technique works for profile avatars, team member cards, and icon frames.

Select the Image element inside the crop wrapper. In the Style Panel (S) Selector field, open the States dropdown and select Hover. Then go to Style Panel → Effects → 2D & 3D Transforms → '+' → Scale and set X and Y both to 1.1 (or 110%). Switch back to the None state and add a Transition: go to Style Panel → Effects → Transitions → '+', set Property to Transform, Duration to 400ms, Easing to Ease Out. Now when hovering the image, it zooms inward smoothly — the crop container clips the scaled image so no white space is visible around the edges.

For non-rectangular clip shapes (diagonal cuts, hexagons, polygons), Webflow's visual editor does not have a native clip-path control. Use the Custom Properties section at the bottom of the Style Panel. With the image container selected, scroll to the very bottom of the Style Panel to Custom Properties → click '+'. Add property: 'clip-path', value: 'polygon(0 0, 100% 0, 100% 85%, 0 100%)'. This creates a diagonal bottom edge. Other values: 'circle(50%)' for circles, 'ellipse(55% 45% at 50% 50%)' for ovals. Requires Basic plan or above to preview in published site; previews live in Designer.

1/* Diagonal cut — paste as clip-path value in Custom Properties */
2polygon(0 0, 100% 0, 100% 85%, 0 100%)
3
4/* Hexagon */
5polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)
6
7/* Angled left banner */
8polygon(0 0, 100% 0, 85% 100%, 0 100%)
9
10/* Circle (same as border-radius 50% but via clip-path) */
11circle(50% at center)

Open the Navigator panel (Z) and confirm your structure is: 'image-crop-wrapper' (Overflow Hidden) → Image (Fit: Cover, Width: 100%, Height: 100%). If the image is outside the wrapper or at the wrong nesting level, the overflow:hidden has no effect. Switch to Tablet breakpoint in the Breakpoint Bar (top of Designer) and verify the crop wrapper adjusts correctly. If using a fixed px height, it will not scale — switch to either a Ratio or use vh/vw units in Style Panel → Size → Height for fully responsive crops.