Issue with Hover Animation on CMS Items

[SiteGrow]

Hi Guys,

I’m currently facing an unusual issue with hover animations on a website I’m building for a client. Specifically, I’ve implemented CMS items listed on the homepage under “Featured Properties,” and for each property, I’ve added an animation that scales (zooms) the image slightly on hover. Upon hovering out, the image should smoothly return to its normal scale.

The issue arises with the animation’s initial behavior. Although I’ve set a duration of 0.5s, the first hover over an item triggers a fast and erratic scaling before subsequent hovers behave as expected, with smooth animations.

I’ve attempted various solutions but haven’t been able to resolve this issue. Any insights or assistance from the community would be greatly appreciated.

Here’s a Link to my Read-Only: Link

Thank you for your time and support.

[zafremedia]

Hello
I checked and found the problem
For the photo you want to scale, you have previously set scale: 1.1 in the style panel, which is wrong.
You have to put this value in the initial state part of the card image scale in animation and completely delete the scale value that you put in the desired photo style part.
This photo can help you for guidance

[zafremedia]

In addition, it is not necessary to give two hover animations and you can specify the first animation for the hover in part and the second animation for the hover out part.
like this picture:

[SiteGrow]

Hi @zafremedia !

It’s working perfectly! Thank you so much!