Two animations on hover action don't work

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

Screenshot 2022-08-23 at 22.02.00
Hover-out settings

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.

1 Like

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 :frowning: If you could share the video that would be amazing!

Thanks

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

1 Like

Thank you so much for helping out with this!

All the best,
Luca

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

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

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

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

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