How can I make an image in Webflow overflow on both the top and bottom of a div/container, without extending the height of the div/container?

To make an image overflow on both the top and bottom of a div or container without extending its height, you can use CSS overflow property along with a combination of absolute positioning and negative margins. Here's how:

1. Set the container's position property to relative: Select the container element (div) and in the Styles panel, under Positioning, choose Relative. This will establish the container as the reference point for absolute positioning of the image inside it.

2. Set the container's overflow property to hidden: In the Styles panel, under Overflow, choose Hidden. This will hide any portion of the image that overflows the container's dimensions.

3. Position the image element: Select the image element and set its position property to absolute. This will allow you to freely position the image within the container.

4. Add negative margins to the image: To make the image overflow on the top and bottom, you need to use negative margins. For example, if you want the image to overflow by 20 pixels on top and bottom, set both the top and bottom margin of the image to -20px. You can adjust the values based on how much overflow you want.

5. Adjust positioning using left and right properties: Since the image is now positioned absolutely, you may need to adjust its horizontal position. You can do this by using the left and right properties under Positioning in the Styles panel. For example, if you want the image to be centered, you can set both the left and right properties to 0.

That's it! By utilizing the combination of relative positioning, overflow hidden, absolute positioning, negative margins, and adjusting the left and right properties, you can make an image overflow on both the top and bottom of a container/div without extending its height.