Skip to main content
A direction aware hover card that displays an image with dynamic hover effects based on the direction from which the cursor enters. Features a customizable content overlay.

Installation

npx inspira-ui add direction-aware-hover

Usage

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

Props

Prop NameTypeDefaultDescription
imageUrlstringRequiredThe URL of the image to be displayed.
classstringundefinedAdditional CSS classes for the card container.
imageClassstringundefinedAdditional CSS classes for the image element.
childrenClassstringundefinedAdditional CSS classes for the content overlay.

Credits

Build docs developers (and LLMs) love