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://registry.inspira-ui.com/direction-aware-hover.json"

Copy and paste the following code

DirectionAwareHover.vue

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.

On This Page