The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Really interesting hover interaction that Microsoft has on their microsoft.design homepage. Have you ever implemented something like this in one of your projects?
@Ljubomir Bardžić really wow! Will definitely love to check it out. Achieving this requires lots of work 😂 maybe coz of the way I am thinking about it.
@Jesutofunmi Oluwalade If a variable font has a bunch of different axes, then doing this is quite simple, you just split each letter into it's own span and define a hover state. Even switching to a different font shouldn't be an issue, although it might slow down the page load if you add a lot of different font files just for this effect.
@Ljubomir Bardžić Oh ok. i think i understand now
@Ljubomir Bardžić this hover is a trend now
@Arsène S wow! Looks great! Is it just adjusting a variable font across one of the axis, or is it changing to a completely different font on hover?
@Ljubomir Bardžić thank you so much! 😍🙏 I used a variable font with tons of different axes because I wanted to keep a smooth, animated transition between different styles when hovering :)
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Trending
maxearnings
The next frontier of payments is live on Contra. How are you maximizing revenue?
micrographics
Micrographics started as utility - barcodes, packaging, instruction labels. How would you use them?
aidesignflow
AI tools are redefining how designer work. What does your workflow look like?
aivideo
AI video tools are moving at warp speed. What tools are you using?
whennotai
As AI accelerates, creative judgment matters more. What part of your work stays human?