Streaming live at 10am (PST)

Circle hover effects with css transitions


#1

Is it possible in webflow to create something this?
http://tympanus.net/Tutorials/CircleHoverEffects/index2.html
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
Mike


#2

Sure http://welove.webflow.com/

Here's the public editor link for you to inspect.
https://webflow.com/design/welove?preview=5ad2bb1f4c565f59425571845a09a66e

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.


#3

Haha you beat me to it Tom http://sab.webflow.com/circle-with-css-transition (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.


#4