Effects

Apply box shadows rollovers and more.

Easily enhance the visual appeal of elements in your website by applying effects like box shadow and opacity. These effects can help create depth, highlight key elements, and adjust the transparency of components, giving your site a modern, polished look.

Type

Specify if the component has effects enabled or disabled. The Hover effect works in conjuction with Transitions.

Type Properties
Description

None

No effect classes will be applied to the component.

Static

Enable effects.

Hover

Enable Start and End state hover effects.

Hover Over

If you set the Type to Hover, you can specify which element should be hovered over to trigger the transition.

Over Options
Triggers transitions when hovering over…

Self

this element.

Parent

the direct parent element.

Container

any parent Container element.

Grid

any parent Grid element.

Flex

any parent Flex element.

Custom ID

the parent with the specified custom ID*

*Custom ID Note

When using a Custom ID to trigger a transition, make sure the parent element has a class name in the format group/{customID}.

If the parent element is a Container, Grid, or Flex component, you can simply enter the custom ID into the Advanced → ID field. Elements will automatically apply the correct class name for you.

However, if you’re using a different component—or have built a custom one—you’ll need to manually ensure the appropriate class name (group/{customID}) is applied to that element.

Note: You do not need to include the group/ prefix when entering your ID. Just enter the raw ID in the ID field, and Elements will handle the rest.

Box Shadow

Apply a box shadow to the Component.

Opacity

Set an opacity for the component.

Effects UI in Elements

Last updated

Was this helpful?