Please help with Zoom Easing Issue

Hey all, On the following two sites I have CMS collections displaying link blocks with background images sourced from their respective “post”. On hover I have image set to zoom, with an easing transition over 400ms. Despite having set an ease transition for ‘All properties’ the zoom occurs instantly with no easing.

Thanks for your help!


Here is my public share link: LINK
Second site: LINK
(how to access public share link)

Hi @TJwebflow

I think this is because you set the image to change width to 265% in the image settings, rather than zooming/scaling using the transform/scale option. I think that is why the 400ms isn’t affecting it - a transition affects a transform ?

Try these steps and see if it achieves what you are hoping for…

  • Firstly remove the 265% on hover for the image. With hover selected click this to remove the style:

this will be blue

  • Then put the link block inside the thumbnail:

move link block inside thumbnail

So now ‘thumbnail image’ should have no hover state, just static.

(CLICK TO EXPAND IMAGES - there is more detail to see!)

Then style the link block like this (i’ve gone for a 1000ms transition):

transition add to normal state

Then with link block hover state selected:

transform add to HOVER state

Scale to suit your design - i’ve gone with a subtle 1.2x

Hope that helps!

Stu

Hey Stu,
Thats how I had orignally done it, and then I’m left with the image inflating beyond its borders like so:

I had the easing working before, as it was setup, and then it snapped to a sudden zoom when I adjusted the card’s contents to be a flexbox justifying to top.

I figured it out. One must set the image fill setting for the non-hover state to a width or height percentage. Thanks for offering assistance @StuM

The only problem is that if clients are uploading images of various sizes, and I can’t set to ‘Cover’ fill the linkblock footprint, then a image that is more slender or narrow will not line up with the top of CMS cards. Adding this to @wishlist

Hi @TJwebflow

Re: the inflation/expansion beyond box issue, in my example the end result stayed within it’s original box - the thumbnail image having an ‘overflow’ none state seemed to keep it in check.

39

Hope you’ve found a workaround…

1 Like