Change text font on hover

Hi everyone!
I am new to Readymag and I’ve been trying to create an animated menu for my portfolio. I’ve categorised my work into sections and I want each section to appear in the menu (editorial design, motion design, …). On hover, I’d like the text leading to each section to become italic (same font, just italic - also, I’m not using a variable font). I watched tutorials and searched through this forum but I couldn’t find anything, which led me to think that this might not be possible in Readymag. Is that right? If so, do you have any idea how I could achieve this with code?

Thanks in advance!

It’s doable and no need to code for this.

I would suggest you used two different text widgets for this (one with default and the other with italic). Place the second image on top of the existing one. Then, add a Hover animation to the one on top (italic) with Opacity 1—>100 with itself as the trigger. The idea is that the second text is ‘invisible’ at first but you can make it ‘visible’ (appear on top of the first one) when hovering it.

To avoid having the first text displaying underneath, you can apply text box color to the second widget or you can opt to use another animation to hide first widget when the second one is being hovered.

1 Like