Shifting position of an element on hover

I am just learning Hype and I created a box, and turned it into a button. I tried the different states and was able to change the color, add a border, etc. using the Element panel.

But what if I want to shift the position of that box slightly? For instance, I want an interface element to have folder tabs and when I roll over those I want them to pop out slightly by shifting position.

From the Elements panel I don’t have access to position or size. But if I go to the Metrics panel, that affects the whole elements and every state. Is there a way to change position or dimensions on a hover?

I know exactly how to write this in code, so I’m guessing I need custom CSS. But I’m not really sure how to add this here.

Thanks in advance,

HI @mcstampfunk

The same way you add color for the different states you simply move your element in the different states.

So, place your element where you want it and then click the “hover” state and move it in the metrics inspector how ever many pixels left, right, up or down you want it to move.

Also, if you would like to create your own custom CSS you would simply choose ‘Edit Head HTML…’ in the Document Inspector (⌘1) and create a set of <style></style> tags and add your CSS inside.
Be careful here as you may need to add !important to the end of each declaration to override Hype’s styles.

DBear, thanks a lot! Ah, I see that the metric panel does work. It didn’t
look like it was working when I tried it because the whole
Normal/Hover/Pressed menu bar went with it so I thought all the states were
being shifted also. Perfect.

On the custom CSS in the , what class/id do you use to associate with
the particular element you are working on? Is there a way to assign that
element a class/id?

Identity inspector (⌘8)

Unique Element ID & Class Name

Important Here you just place the names as you want them without the # or .

May I suggest a little peruse of the documentation lol :slight_smile: