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 create image tiles with overflow hidden in Webflow—where only a portion of a larger image is visible—you'll need to control the size of the parent div and apply appropriate CSS styling.

1. Create a Parent Div Block (Tile Container)

• Add a Div Block to your page and give it a class name like tile-container.
• Set Width and Height to your desired tile size (e.g., 300px x 200px).
• Set Overflow to Hidden under the Layout section (in the Style panel). This clips any content that exceeds its size.

2. Insert an Image Inside the Div

• Drag an Image or Div Block with a background image into the tile-container.
• If using an image element:
• Set its Width and/or Height larger than the tile-container (e.g., 150% width).
• Use Position: Absolute or Manual Margin/Transform to control which portion is visible.
• If using a background image:
• Set the child div to Width/Height greater than the parent.
• Apply the image using Background Image in the Style panel.
• Use settings like Cover or Custom Positioning (e.g., 50% 20%) to control the visible area.

3. Adjust Position as Needed

• To shift the visible portion of the image, use:
• Positioning controls (e.g., move the image by setting Position: Absolute and adjusting Top, Left).
• Or apply Transform: Translate to shift the image inside the tile.
• These let you "slide" the image inside the tile area.

4. Optional: Responsive Settings

• For responsiveness, use % width, vw/vh units, or set images with max-width: 100% and use object-fit: cover where appropriate.

Summary

To show only part of an image in a tile in Webflow, wrap the image in a fixed-size parent div with overflow: hidden, then make the image larger and shift it inside the div using positioning or transforms. This effectively masks the image so only a portion appears.