Logo

Documentation v8.2.5

  • Home
  • Hover Exclusive
Downloads Preview
Light
Dark
System

Hover

Custom effects for elements hover states.

Elevate

Use .hover-elevate-upor .hover-elevate-downclasses to add elevation effect for element's hover state.
Elevate up on hover Elevate down on hover 
<a href="#" class="bg-light rounded p-10 hover-elevate-up">
    Elevate up on hover
</a>

<a href="#" class="bg-light rounded p-10 hover-elevate-down">
    Elevate down on hover
</a>

Scale

Use .hover-scaleclasses to add scale effect for element's hover state.
Scale on hover 
<a href="#" class="bg-light rounded p-10 hover-scale">
    Scale on hover
</a>

Rotate

Use .hover-rotate-startor .hover-rotate-endclasses to add rotate effect for element's hover state.
Elevate up on hover Elevate down on hover 
<a href="#" class="bg-light rounded p-10 hover-rotate-start">
    Elevate up on hover
</a>

<a href="#" class="bg-light rounded p-10 hover-rotate-end">
    Elevate down on hover
</a>