Streaming live at 10am (PST)

Scale transform on Hover not working with Flexbox?


#1

Hi everyone -
I created some image tiles with Flexbox. I now would like to have them scale larger when hovered over. The hover scaling works when I am within Webflow but not on the published site: http://flextesting.webflow.io/
read-only: https://preview.webflow.com/preview/flextesting?preview=ba4497dc4a0b560b2b720f883b9dd6f9

As a comparison test, I set it up with columns instead of divs and did not use Flexbox. In that scenario, the scaling on the published site works: http://hovertransformcolumns.webflow.io/
read-only: https://preview.webflow.com/preview/hovertransformcolumns?preview=01383891d4ca6552bec74e8a9e1e52b5

Any ideas on how to get the hover scaling to work with Flexbox? I'm really loving Webflow and the new Flexbox enhancement, but sometimes it confounds me. Thank you in advance!


#2

Hi @lgriffen, I haven't sorted why, but the load reveal seems to be affecting the hover state somehow. When you select any cell and set the Load Reveal interaction to none the hover works as expected. I don't think it is an issue with Flexbox as I can remove any cell from the flexbox section and set the attribute to block and get the same issue.

Are the interactions the same in both of you examples? Only the column structure changed, correct?

I don't see any reason for a conflict with the init or the transform on the Load Reveal interaction, hopefully it is a place to start. Looking into it some more and will get back to you.


#3

@lgriffen, I did a separate test to see if all of the properties would work together and they work fine for me. ( Flexbox + hover states + transforms + load interactions + child interactions + nested hover states with hover transitions on the children ).

https://webflow.com/website/test-87f54f
Please ignore the animation, I piled it on thick :smile:

I cannot reproduce the issue you are experiencing in my own attempts in a new build. Would you please closing and reopening the designer and republishing the file. Sorry you are experiencing this issue. If it persists after republishing please let us know.


#4

@vlogic Thank you for sending the test link. I greatly appreciate it. I've been pulled away to other things, so am just getting back to this. I will take a look!


#5

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