Academy
Essential course
Effects & hover effects
Essential course

Effects & hover effects

This chapter covers different effects that can be applied to your elements and groups. There are regular effects, such as shadows, blurs & blendmodes. And we have hover effects that make elements behave in a certain way when viewers hover them.

Effects

Depending on the type of element selected, there are different effects you can apply to it. And each effect has its own additional customisation options. With shadows for example, you can further define the X and Y distance, color, blur, and spread of the shadow.

Hover effects

Hover effects show only when a viewer hovers them with their mouse. These effects are very useful for elements that perform an action, as you can use them to indicate that these elements can be interacted with.

And because these effects only show when hovered, there are much more options available. For example, it’s possible to change the color of a text or make it move a bit in a certain direction.

You can also combine both effects. So for example, while having a shadow enabled as a default effect, it’s possible to adjust the shadow or remove it entirely as a hover effect.

Effects and hover effects can be applied to both groups and individual elements.

Build along with us

Want to build the complete example page in this essential course along with us? You can download all the course assets here:

Follow us

To get notified about new courses and tutorials