Skip to main content
Solved

Move content if hover expands


Clara_de_Magalhaes_Carvalho

Hello everyone,
I am creating a prototype and I have a bar with a series of filter categories.
I want to hover over the category icons, and they’ll expand, showing the category name.

The hover effect is working as expected, but I need to MOVE the rest of the icons to the right while hovering, so that the expanded icon doesn’t rest in front of other icons.

What was supposed to do:
image
(The icons should move right while hovering → I drew by hand, because the forum doesn’t allow me to put more than one pic. But icons are with WHITE background, when hover, they turn into RED and expand).

I’d love to know if any of you accomplished this in a similar project.
Thank you for your patience!
🙂 Clara

Best answer by Nate_G

@Clara_de_Magalhaes_Carvalho You could accomplish this effect by having your buttons within an auto-layout frame, so that when the buttons expand, they will move the corresponding buttons.

View Prototype
Get the File

View original
This topic has been closed for comments

4 replies

Clara_de_Magalhaes_Carvalho

This is the original state:
image


Clara_de_Magalhaes_Carvalho

This is what is happening (hover over other icons):
image


Nate_G
  • Power Member
  • 180 replies
  • Answer
  • October 18, 2023

@Clara_de_Magalhaes_Carvalho You could accomplish this effect by having your buttons within an auto-layout frame, so that when the buttons expand, they will move the corresponding buttons.

View Prototype
Get the File


Clara_de_Magalhaes_Carvalho

Thanks Nate, with your help I was able to reproduce it! 🙂


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings