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.
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>