Direction Aware Hover

A direction aware hover card, that displays an image with dynamic hover effects and customizable content overlay.

Install using CLI

npm
pnpm
bun
yarn
npx shadcn-vue@latest add "https://inspira-ui.com/r/direction-aware-hover.json"

Install Manually

Copy and paste the following code

DirectionAwareHover.vue

API

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

Card Spotlight
A card component with a dynamic spotlight effect that follows the mouse cursor, enhancing visual interactivity.
Flip Card
A dynamic flip card with smooth 180-degree flipping animations along both the X and Y axes, providing an engaging and interactive visual effect.