The website https://www.catholicintl.com has a neat effect where if you move the cursor over an image it appears to zoom in slightly. Is there a way to do that with Sparkle?
I would love more functionality with how we can interact with images on its hover state, but unfortunately for now this is not possible.
But one of our community members, Selcuk, has come up with a workaround that you can find here - Sparkle Effects by Selçuk Yılmaz
You can do it using Buttons. Please see Buttons | Sparkle Documentation
Thanks, I’ll take a look at that.
Thank you for that suggestion. I tried adding a button and given the button an image. But when I hover over it, the top and bottom edges of the image appear to move slightly, but the image doesn’t zoom. I must be doing something wrong.
To achieve zoom in effect with Button (example: button_animation) you need two images, transition from one to another gives zoom effect.
The first image is the one which is seen on the page, you insert it as a Button Content image. The second is a crop of the first. It is inserted as Mouse Hoover image.
In my example the crop is about 97% of the original but saved with the same dimensions as original which makes transition smoother. Also to make transition smoother I put 2 s in Animation Time field.
Hope this helps.
This sounds really cool. I’ll try it. Thanks!
That worked really well! Thank you!
Glad to hear.
You’re welcome!