Join the Webstudio community

Updated 4 weeks ago

How to do this big button

hello guys, i am new with webstudio. i would like to make a hover effect like the one in the projects present at this link: du2design.com (my website) normal state of the single project link, no text and image at 100% opacity. when i am in the hover state, i want the text to appear and the image to be opaque. how can i do it? Tx in advance
Attachment
Screenshot_2025-04-22_alle_16.17.45.png
O
d
B
11 comments
You want to use css variables for this
tx i'll try, it's a little bit tricky for those like me it's new with webstudio 🥲
why there are so many ocapity levels on the right? anyway I'm not getting this thing to work
Attachment
Screenshot_2025-04-22_alle_17.35.25.png
Must be a bug. Fixing
@Bogdan do you see how to reproduce this?
Yep, add animation group with fade in
but with fade in on animation group i won't have 2 different movemente (img opacity and text opacity) change togheter
@Bogdan we're talking about the hover state, not of the way the whole button appears on the screen
Can you share your project please?
Add a reply
Sign up and join the conversation on Discord