How can I add a hover effect?

Question
1

Hi Sparklers, can anyone show me how to add a hover effect to zoom in or add other hover animations on an object in Sparkle?

2

@Nathan, This is where it gets a bit tricky with Sparkle.

I’m really hoping for more hover states for buttons and images - really keeping my fingers crossed! :slight_smile:
In the meantime you could go and check out Selçuk’s text and image hover states and see if that is something you can work with. Please note the hover states have been created with CSS which is not native to Sparkle, but I’m sure Selçuk will have some good instructions in how to us it - https://www.selcukyilmaz.com/sparkle/sparkle-effects/

3

Hi Nathan, please check this thread: How to add a hover effect?
Hope this helps.
ZbR

4

Thanks @FlaminFig and @zbr .

Having zero background in coding, it took me a while to figure it out, but after a little research, a simple HTML embed with <styile> ... </style> did the trick, however, for it to work in Sparkle, the item should not be a box. It worked for me when I change the item to an image or a button.

I’m getting more excited every day with the simplicity of Sparkle, and the celestial magic done by the app which opens up a whole combination of possibilities for how each of my new projects would sparkle.

1 Like