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 in Webflow where the image is larger than the tile and only a portion is visible, you’ll use overflow control and properly size the wrapper and image.

1. Create the Tile Wrapper (Div Block)

• Add a Div Block to your Webflow canvas.
• Set a fixed width and height (e.g., 300px by 200px).
• Set overflow: hidden to clip anything outside its boundaries.
• Give the div a class like tile-wrapper for easy styling and reuse.

2. Add and Style the Image Inside the Wrapper

• Drag an Image element into the tile-wrapper div.
• Set the image's width and height larger than the parent (e.g., 150% or set a fixed pixel size like 500px wide if your tile is 300px wide).
• Use position: absolute on the image if you want more control over its visible portion.
• Set the tile-wrapper to position: relative so the absolute positioning is contained.
• To control which part of the image is visible, adjust the positioning of the image using top, left, right, bottom, or transform: translate().

3. Optional: Make It Responsive

• Use percentage widths (e.g., 100% for the image) and adjust with max-width constraints if needed.
• Use object-fit: cover or background images (see Note below) for better control with varying screen sizes.

4. Alternative: Use a Background Image Instead

• You can also set the image in the tile as a Background Image on the tile-wrapper.
• Set background-size to “cover” or “contain” depending on your needs.
• Use background-position to control which area of the image is shown.

Summary

To crop an image inside a tile in Webflow, place the image inside a fixed-size Div Block with overflow: hidden, then make the image larger than the div and shift it using positioning. Alternatively, use a background image for flexible control without extra elements.