# Effects

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>" %}

### Type

Specify if the component has effects enabled or disabled. The Hover effect works in conjuction with [Transitions](https://docs.realmacsoftware.com/elements-docs/elements/components/common-controls/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

<figure><img src="https://3876014504-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNy6AECEVH2p4eFDicpM1%2Fuploads%2FIb7Bo3iCeQadjeBPi7VM%2FCleanShot%202024-10-23%20at%205%E2%80%AF.37.01%402x.png?alt=media&#x26;token=4550779d-848b-4a1d-a467-970859cf3a5e" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.realmacsoftware.com/elements-docs/elements/components/common-controls/effects.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.