Join the Webstudio community

Updated 2 months ago

How to do this big button

At a glance

The community member is new to Webstudio and wants to create a hover effect where the text appears and the image becomes opaque when hovering over a project link on their website (du2design.com). The community members suggest using CSS variables and provide a YouTube video that may help explain the solution. However, the community members are having trouble implementing the desired effect and are seeking further assistance. There is no explicitly marked answer in the comments.

Useful resources

ddavideakadudu

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

11 comments

OOleg Isonen

You want to use css variables for this

OOleg Isonen

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

ddavideakadudu

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

ddavideakadudu

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

Attachment

BBogdan

Must be a bug. Fixing

OOleg Isonen

@Bogdan do you see how to reproduce this?

BBogdan

Yep, add animation group with fade in

ddavideakadudu

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

ddavideakadudu

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