Two animations on hover action don't work

[toscanotto (Luca Toscano)]

Hello mighty animators over there,

I’m trying to achieve the following animation: when hovering into an image, an overlay appears and the image contained in the card slightly scales up. When hovering out, everything goes back to its original state. I’ve setup both animations for hover-in and hover-out, but just one works (the scaling one at the moment).

Here is my public share link: Webflow - toscanotto.com

Bonus issue: the scale-up animation ignores that the image container has rounded shape, showing the squared edges during the animation time.

Thanks!

Here’s a few of pictures of the animation panel and the card itself:

Page builder

Preview (the card overlay seen above doesn’t show up but the scale-up animation works)

Hover-in settings

Hover-out settings

[Sachin (Sachin Aathreyaa)]

Hi @toscanotto are you looking to create something like this?

There are many ways to achieve the effect you are looking to create if you are satisfied with the above video I’ll share the link.

[toscanotto (Luca Toscano)]

OMG yes that’s what I was trying to do! I’ve seen that you have a single Div containing all the other elements and I’m wondering what I did wrong in mine If you could share the video that would be amazing!

Thanks

[Sachin (Sachin Aathreyaa)]

Hi, I hope you figure it out if not below is the link

https://preview.webflow.com/preview/sachinathreya-designs?utm_medium=preview_link&utm_source=designer&utm_content=sachinathreya-designs&preview=b414e6003262137350c89ffebc63ac49&pageId=62e258f3794e24e4b1856bcc&workflow=preview

Please tweak the animation to your liking this was just for experimentation

[toscanotto (Luca Toscano)]

Thank you so much for helping out with this!

All the best,
Luca

[toscanotto (Luca Toscano)]

Hey @Sachin I actually noticed that in your mockup the images have rounded corners in the builder but not in the demo. I’m facing the same issue whereby when hovering onto the image the edges of the image go from rounded to squared.

Do you know why this is happening?

Builder mode

Preview mode

Also, I noticed that the image is scaling up and down starting from the top-left corner and not from the centre. I tried solving this but I’m struggling to find a way to fix this

Thanks again

[Sachin (Sachin Aathreyaa)]

I don’t see this issue and see
the origin is center

[Sachin (Sachin Aathreyaa)]

@toscanotto

I actually noticed that in your mockup the images have rounded corners in the builder but not in the demo.

https://drive.google.com/file/d/1csQMcr3XHA_2_m91RInM0gsoWegT0KQy/view?usp=sharing

[toscanotto (Luca Toscano)]

Uhm, interesting, this is what I see…maybe we have two different versions of Webflow, but I’m not sure

https://drive.google.com/file/d/1gjgUrqsqQ-v-Id0aNOLZB6OuLH23bUtS/view?usp=sharing