Image Expands Undesirably On Trigger/Interaction

[carlsson]

Hey guys,

I’m trying out a new trigger/interaction. I want the image to slowly increase in size, while staying in the same sized “frame”. The image expansion works great, but for some reason the “frame size” seems to change just a few pixels, which is bothering me.

I’ve attached a GIF and the site to make it easier to understand what I mean.

PS. For some reason, this glitch doesn’t show up in the Webflow Designer Preview Mode for me-- only on the published site.

- Published site

---

Here is my public share link: LINK
([how to access public share link][2])

[DFink (Dave)]

Your style “director thumb” has a margin of 3 pixels on each side. This causes that empty space that gets filled on hover. I would change your layout to flexbox using percentages for the columns so that you can add the spacing as 1-2% instead of using margins or padding.

[carlsson]

Hey @DFink, and thanks for your response!

I’m not too familiar with Flexbox, but I’m definitely open to trying it out.

In what style would I apply the Flexbox? The Dynamic Items, or the Dynamic List/Wrappers? Or in all of them?

[carlsson]

And how would I change the percentages for columns spacing when using Flexbox?

[DFink (Dave)]

This should help you get comfortable with the principles of flexbox. For what you are doing, it is well worth learning. Flexbox | Webflow University