How can I create tiles in Webflow with images that are larger than the parent div block, so that only a portion of the image is visible and the div wrapper cuts off the overflow?

To display larger images inside smaller divs in Webflow—so that only a portion of the image is visible—you need to control the image positioning and overflow behavior of the parent container.

​

1. Create the Tile Structure

​

• Add a Div Block to your Webflow canvas. This will act as the tile container.
• Set a fixed width and height (e.g., 300px by 200px) so that it limits the visible area.

​

2. Set Overflow to Hidden

​

• Select the Div Block (tile container).
• In the Style panel, set Overflow: Hidden. This ensures anything outside the div’s boundaries is not visible.

​

3. Add the Image Inside the Div

​

• Drag an Image element or set a Background Image inside the tile.
• If using an Image element, place it directly inside the div.
• Select the image and increase its width and/or height (e.g., set width to 150%).
• Use positioning (e.g., transform > move or margin) to shift which part of the image appears within the visible area.
• If using a Background Image:
• Select the parent Div.
• Go to Background in the Style panel and:
  • Set the Image position (e.g., center, top right).
  • Use Size: Cover or Custom sizing for scaling.
  • Enable No Repeat if needed.

​

4. Optional: Animate or Interact

​

• Use Webflow Interactions (IX2) to animate the image position on hover if you want parallax-style effects (e.g., move the background image slightly).

​

Summary

​

Set the parent div’s overflow to hidden, insert an image that’s larger than the div’s dimensions, and then position the image to display just the portion you want. This creates the effect of a cropped image tile while keeping the full image inside.