Skip to content

Make elements react on hover

Make an element change when a visitor points at it: a box that lifts, a button that darkens, a picture that brightens. You set the resting look in the Style panel and the hover look in its twin, the Hover style panel. The example builds a grey text box that lifts on hover.

Build the text box

  1. Click + in the content area and pick Section from the Layout tab.
  2. Click + on the section and pick Row.
  3. Click the grid icon on the row, pick the tile with three equal columns and click Save.
  4. Click + in the first column and pick Text from the Content tab.
  5. Type "Open day", set it to Heading 3 and add one line under it.

Set the resting style

  1. In the same settings dialog, open the Style panel.
  2. Pick a light grey Background.
  3. In the box model, set the top, left and bottom sides of Padding to 24.
  4. Set Border radius to 8.
  5. Set Drop shadow to 1.

Set the hover style

  1. Open the Hover style panel.
  2. Set Drop shadow to 4.
  3. Click Save.
  4. Click Save on the DXPR Builder toolbar.
  5. Open the view menu, the eye icon on the toolbar, and choose Preview.
  6. Move the pointer onto the text box.

What you see

At rest the text box is grey with rounded corners and a light shadow. When the pointer reaches it, the shadow deepens and the box seems to lift; when the pointer leaves, it settles back. The shadow change is animated. Other hover changes, such as a new colour, switch at once.

Settings

The Hover style panel holds the same fields as the Style panel. A field left empty keeps the resting value.

Field Use on hover
Margin, Border, Padding (box model) Shift, frame or grow the element
Font color Highlight text
Border color Emphasise the border
Background Change the fill
Background image, Background style, Background position Swap or move the picture
Border style Show a border
Font size Enlarge the text
Border radius Round the corners
Opacity Reveal or dim the element
Drop shadow Add depth, from 1 to 5

Common patterns

  • Card lift: Drop shadow 1 in Style, 4 in Hover style.
  • Picture reveal: Opacity 0.7 in Style, 1 in Hover style.
  • Button colour change: a darker Background in Hover style.
  • Border highlight: Border style Solid with a light Border color in Style, an accent Border color in Hover style.

If you don't see the effect

  • The text box does not change when you point at it. The hover value equals the resting value, or you set it in the Style panel by mistake. Open More > Settings and raise Drop shadow in the Hover style panel.
  • The effect is hard to judge while you edit. In edit mode the element also shows its control bar and outline when you point at it. Choose Preview in the view menu and point at it again.
  • Opacity, Font size or Border radius set to 0 has no effect. A value of 0 counts as not set for these three fields. To fade an element almost completely, use an Opacity of 0.01.

What's next?

Something wrong or missing on this page? Report it or edit the page.