Transform on hover state not working in preview mode or on published site (only works on canvas)

I’m trying to set a hover state to a link block so it moves up by 2 pixels when you hover over it. It also has a shadow that grows when you hover over it. The shadow and the transform on hover effect work fine on the canvas, but the transform effect does not work when in preview mode.

It does not work on the published site either. Only on the canvas.

View here:

Here is my site Read-Only: https://preview.webflow.com/preview/ali-z?utm_medium=preview_link&utm_source=designer&utm_content=ali-z&preview=9111a1640be463f6ce09be4a6acb0dd4&pageId=5d92f952e2f2d302fe0dd85f&mode=preview

1 Like

Ok I found out why this was happening. I had legacy interactions on the portfolio link blocks. These interactions were overriding the transform settings on the element. I was using legacy interactions because the new scroll-into-view interaction does not trigger if the element is loaded already in view. The solution was to do away with the legacy interactions altogether and replace them with a page load interaction. The transform on hover effect is better accomplished with an interaction, because if an interaction is transforming an element, it overrides any transform settings you already have on the element.

1 Like

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