Hey guys!
Nice to meet you! First post here. =)
So…Im trying to create a hover animation on the background of a section, and Im looking for some help.
Basically, the behavior should be something like this.
User hover over the hero section
Some shapes on the background animate changing from squares to circles.
This is possible?
Thanks!
Hi there,
Could you share your site’s public link? How to Enable a Webflow Share Link.
It is definitely possible but more complicated because as of yet Webflow interactions does not give you the whole range of style features. Basically you would need for each element to have a container, and then within that you have both the square and the circle, when the hero is hovered on the squares disappear and the circles appear.
You can’t (I believe) have the squares directly merge into the circles 
Any more help get back to me,
Arthur
I made this super quick, so it’s not exactly a square turning into a circle, but apparently you can make square edges get round on hover, in Webflow. What do you think?
@elcalibano the issue with that is that I guess @AndreOvigli wants a bunch of elements and them all to change when the hero is hovered on.
Arthur
Arthur, isn’t there a way to group all the elements and hero together and make the group (or Div or Container) the hover trigger? I know that you can take a link block and put objects inside it, and make them have the link class with a scale animation, so everything put inside the link block will be affected when hovered over. Maybe scale is possible but rounded corners is not. I’ll experiment more later today.
Here is a link of how to change your buttons to circles on hover:
Changing, you can maybe have multiple elements in absolute positioning that are sitting on top of each other then do display none on hover for the elements you want to morph and display block for the ones you want to expand out (then scale those). The elements that you want to morph in should have an interaction of display: none on load, and scale of zero. Then add an interaction to the background that affects other elements and make those elements change to block and scale of 1.0. That could get close to the desired effect until there is an interaction affect other elements borders/radius.
