How to do this big button

Question

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

Oleg Isonen · Answer

You want to use css variables for this

Oleg Isonen · Answer

this will probably explain https://www.youtube.com/watch?v=rg49mmDvdlE

davideakadudu · Answer

tx i'll try, it's a little bit tricky for those like me it's new with webstudio 🥲

davideakadudu · Answer

why there are so many ocapity levels on the right? anyway I'm not getting this thing to work

Bogdan · Answer

Must be a bug. Fixing

Oleg Isonen · Answer

@Bogdan do you see how to reproduce this?

Bogdan · Answer

Yep, add animation group with fade in

davideakadudu · Answer

but with fade in on animation group i won't have 2 different movemente (img opacity and text opacity) change togheter

davideakadudu · Answer

@Bogdan we're talking about the hover state, not of the way the whole button appears on the screen

Bogdan · Answer

Can you share your project please?

davideakadudu · Answer

senti in direct

Join the Webstudio community

How to do this big button