Today I wanted to try the new transitions and got puzzled with my first try. I wanted to style the links in the header, so the font size increases a bit when you hover with the mouse over them.
Now normally (without the transitions) I would just target the menu links with :HOVER and add the styling CSS via the <> CUSTOM CSS. But your transitions do have the EVENT (hover) as well. Me (noob) … I would expect that I should just target the header links (without the :hover) and add event in transitions to hover. But this way it didn’t work…I had to target the menu links with :hover & set the event to hover as well. Is that how it supposed to work ?
+ just out of curiosity … when I set the font-size to a bigger size … the links were getting bigger like this : the right side of the “word” was fixed and the text was expanding to the left side. What do I need to use (more likely custom CSS, right?) for it to expand all sides equally ?
What you tried should have worked. Did you remember to set the hover event value (the field to the right of the hover field)? That is necessary when using an event for transition.
If you’re trying this and it isn’t working, perhaps you could provide me with access to your site so I can troubleshoot?
Regarding your other question about controlling how the text expands, perhaps you need to center align the text via the Text property group? However, a like to your page would help me understand the issue better.
Cheers,
Sebastian
P.S I will create a video tutorial for Microthemer’s animation and transition properties soon.
