hover

Hover

Custom effects for elements hover states.

Elevate

Use .hover-elevate-up or .hover-elevate-down classes to add elevation effect for element's hover state.

Elevate up on hover Elevate down on hover

html
<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-scale classes to add scale effect for element's hover state.

Scale on hover

html
<a href="#" class="bg-light rounded p-10 hover-scale">
    Scale on hover
</a>

Rotate

Use .hover-rotate-start or .hover-rotate-end classes to add rotate effect for element's hover state.

Elevate up on hover Elevate down on hover

html
<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>
Help Ukraine to stop russian aggression