Streaming live at 10am (PST)

Circle hover effects with css transitions

Is it possible in webflow to create something this?
I know there are interactions and i explored them some. Again i’m a total newb.
I also tried the tutorial with adding the HTML and CSS but it wasnt working again newb.

Thanks for the help


Here’s the public editor link for you to inspect.

You’ll need hover + transition for the (inset) box shadow of the circle and an interaction for the nested text element (set on circle, affect inner element) for opacity and scaling.

Was filling the circles with funny images but kinda lost interest, sorry.

Haha you beat me to it Tom (public link on the green icon)

I tried many structure but had a bug with hover. I must have one extra element to reproduce the round border.
So in order for the text elements not to mess with the hover triggering the filling effect, those elements have to be children of the hovered one. And Tom you did like me, to avoid a fade from transparent to color, you had to activate inner shadow with zeroed values on the normal state.