| description |
|---|
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.
{% embed url="https://youtu.be/IljWfMjwW-Y" %}
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. |
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* |
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.
Apply a box shadow to the Component.
Set an opacity for the component.
