Scale/zoom image without overflowing parent

Hello good people!

I have a gallery that displays 20 small images. Each image has a parent div. I want to zoom/scale up some of the images and move them around to get it to the right spot within the visible area. But I dont want the image/child to overflow its parent. Is this possible?

At the moment i’m using overflow:hidden, and i’m getting the desired result. But it annoys me that I see the mess/overflow behind the divs when I use dev tools.

Background: cover with zoom would have been perfect for this.

Best regards
Neo

I haven’t used it, but maybe you could play around with clip-path.

Hello man. Thanks for the tip. In the description it looks like what im after, but the browser support is weak.

Yeah, fair enough. TBH, no end user inspects elements, though, so I’d be perfectly happy with overflow:hidden.

1 Like

I don’t see how that is a problem at all?

Or am I misunderstanding what you want?

Overflow hidden is perfect for hiding overflow. What devtools does is neither here nor there with regards to the working of a site :slight_smile:.

Devtools is a diagnostic tool and you shouldn’t be concerned about its effect on the display because that’s its job :slight_smile:

4 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.