Logo

Documentation v8.2.9

Downloads Preview
Light
Dark
System

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 
<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 
<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 
<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>
buy metronic buy mega bundle
Preview Get Help Buy Now