Streaming live at 10am (PST)

Images that get closer to one another before they resize

Hello !

I have 3 images in DIV , set to Horizontal layout. On the largest window they are somewhat separate from one another- how can I get the 3 images to move closer to one another without them being resized to a smaller size as the browser window gets smaller? I have been trying different things for few days now with no success.

I would like the 3 images to move closer (even overlap) as the browser gets smaller but maintain their original size.
is that doable?
thank you for any help!

Hi @RoyNY and welcome. It is possible as images are inline blocks you do not need set horizontal layout, just place them in one div and set margin as you need. Those are pure CSS basics.

@Stan thank you so much for your reply!

I have tried in few different ways to achieve it with no success. I have attached here 3 images that might explain better what I am trying to do-
Slide one- the browser full width- images are separated from one another
Slide 2- as the browser window gets smaller- the images get closer and overlap up to a certain point
Slide 3- from a certain size the images retain their position and get scale down.

I understand how to do that between breakpoints- what I cant achieve is to get this to happen on the same breakpoint (like desktop for example)

I was able to get closer to that effect with Absolute positioning of all 3 images- but cant figure out how to give the block a min width and scale down from a certain point.

thank you again for your help
Roy