Learn more about Mintlify
Enter your email to receive updates about new features and product releases.
A direction aware hover card that displays an image with dynamic hover effects and customizable content overlay.
npx inspira-ui add direction-aware-hover
<template>
<DirectionAwareHover
image-url="/path/to/image.jpg"
class="w-96 h-96"
image-class="object-cover"
children-class="text-white"
>
<h3>Hover Content</h3>
<p>This content appears on hover with direction-aware animation.</p>
</DirectionAwareHover>
</template>
<script setup>
import { DirectionAwareHover } from '@/components/ui/direction-aware-hover'
</script>
| Prop Name | Type | Default | Description |
|---|---|---|---|
imageUrl | string | Required | The URL of the image to be displayed. |
class | string | undefined | Additional CSS classes for the card container. |
imageClass | string | undefined | Additional CSS classes for the image element. |
childrenClass | string | undefined | Additional CSS classes for the content overlay. |