Hover effects

Select an element and look at the State row at the top of the panel — it sits at the top of both tabs, General and Advanced, because most of what you will change (Background, Text, Layout) lives on General. Beside Default there are now two more:

• Hover — how this element looks while the pointer is on it.
• Hover ▸ <box name> — how it looks while the pointer is anywhere in the box around it. The cell names that box, so it is never a guess.

The second one is why this page exists. The first can only do what a pointer placed directly on the element can do: recolour a line of text, brighten a photo. The second does the thing every storefront has: point at the whole product card and the image lifts a little, the title changes colour, a quick buy button appears — three different elements reacting to one pointer that is on none of them.

The card that ships with the product list is flat: image, title and price are all direct children of the card. So selecting the image and opening Hover ▸ Product is already "when the card is hovered", with nothing to arrange. Nest things deeper and the box taken is the nearest one — and the cell says which.

Once a state is selected, everything you change — Background, Border and shadow, Spacing, Layout, Text — applies only then. The ordinary look is untouched. Press Default to go back.

The Effect row: five names instead of setting it up by hand

Directly under the State row, while one of those two cells is open, sits an Effect row with five choices: Lift, Zoom, Fade, Brighten, Underline.

They are not a separate mechanism. Pressing one fills in a few lines in the groups right below, exactly as if you had typed them — so you can keep editing by hand, and when you do, the name stops being highlighted: the effect is no longer the one it names. Pressing the highlighted one clears it.

None of the five changes the element's size, and that is deliberate. A box that grows under the pointer pushes everything around it — including the thing the visitor was aiming at. Zoom uses a transform, so the image gets bigger and nothing moves. It is also why the Hover tab offers no Size group at all.

If a zoomed image spills out of the card, that is the card's job, not the image's: select the card and set Advanced → Overflow to hidden.

A button that only appears on hover

An "Add to cart" button that sits on the card but only shows when you point at it is the one thing on this page that is not a state — because a state only overrides a look that is already there, and here something has to hide the button first.

Select the button, open Advanced → Display, and turn on On hover. The button disappears, and comes back when the pointer enters the box around it. The switch only appears when the element really is inside a box: with nothing to hover, turning it on would simply delete a button.

It is hidden by fading it out and switching off its clicks, not by removing it from the page: it keeps its place, so the card does not jump as it appears, and while it is invisible nobody can click it by accident.

Phones: no pointer, and nothing lost

This is the part worth knowing.

A touch screen has no hover. Left alone, a tap would latch the hover look until something else is tapped — and, far worse, the button you set to "only show on hover" would be invisible forever on a phone, with no gesture that brings it back.

So everything on this page applies only on a device that has a pointer. On a phone, hover effects simply do not run, and an "only on hover" button is always visible — which is what every storefront does. There is nothing for you to turn off.

Every screen size is set separately

Both states and the On hover switch follow screen size, under the inheritance rule in Adjusting for phones. Set at desktop, it holds all the way down until a narrower size says otherwise.

On the canvas, pointing at the element shows the real effect. And while the Hover tab is open for editing, the canvas holds that look — otherwise your pointer is over the inspector, and you would be changing a colour with nothing to see.

A transition is added for exactly the properties you changed, about a fifth of a second. Set your own transition and your value is kept.

A few elements have a Hover cell of their own

Buttons, tab items, menu items, filter options, variant options — these already had their own Hover cell, drawn by the element itself. There you see one Hover cell rather than two, and it works as it always did.

The "skin" elements — a tab item, a quantity button — draw no box of their own on the page, so they have no Hover ▸ cell at all. To make a whole row react, set it on the box that contains them.