Streaming live at 10am (PST)

Changing shape on hover

Hi all,

Is it possible to change one shape into another on hover? I’m trying to convert a circle into a square, but can’t seem to find a way to do this through interactions.

All advice is much appreciated.

Thanks.

sessionone


Here is my public share link: LINK
(how to access public share link)

I made an easy example here:

https://preview.webflow.com/preview/circle-into-square?preview=ba4174cf896e827c7c38e4c1a59281f0

Check it out and let me know if that helps

Cheers,

1 Like

Thanks!!!

Still trying to figure out what you did there, but this is what I was looking for!

Thanks again.

sessionone.

A circle is defined by the border-radius. Therefore you have one css property to control the form of the desired element.

E.g. if you want a circle, made the br 50%. Set it to 0 to have a perfect square.

Now all you need is a transition - because if you dont have one - you ll not be able to see the transformation. Its too fast.

Then you goto “hover” and defined e.g. another border-radius for the hover-state.


Voila, your circle transforms into a regular shape.

Regards
Daniel

2 Likes

Thanks!!!

I did have an idea that it has something to do with the border radius, but did not know where to change it on hover.

Thanks again!

sessionone

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.