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.
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:
Then put the link block inside the thumbnail:
So now ‘thumbnail image’ should have no hover state, just static.
(CLICK TO EXPAND IMAGES - there is more detail to see!)
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.
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
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.