# DirectionAwareHover

> Image card with overlay that slides in from the mouse entry direction.

- Package: `fancy-ui-svelte` (Svelte 5 + Tailwind CSS v4)
- Category: Cards
- Tags: card, hover, image, animation, direction, interactive
- Docs: https://fancy-ui.rama.app/docs/components/direction-aware-hover
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/src/lib/fancy-ui/direction-aware-hover

## Import

```svelte
<script lang="ts">
  import { DirectionAwareHover } from 'fancy-ui-svelte';
</script>
```

Setup (once per project): `npm install fancy-ui-svelte`, then add `@import "fancy-ui-svelte/tailwind.css";` after `@import "tailwindcss";` in your main CSS file. Full guide: https://fancy-ui.rama.app/llms.txt

React: `import { DirectionAwareHover } from 'fancy-ui-react';` (same prop names; `class` becomes `className`, snippets become `ReactNode`).

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `imageUrl` (required) | `string` | — | URL of the background image |
| `imageAlt` | `string` | `"image"` | Alt text for the image |
| `childrenClass` | `string` | `""` | CSS classes for the overlay content wrapper |
| `imageClass` | `string` | `""` | CSS classes for the image element |

## Snippets

| Snippet | Description |
| --- | --- |
| `children` | Content shown in the overlay when hovered |

## Examples

### Basic Usage

```svelte
<script lang="ts">
	import { DirectionAwareHover } from "fancy-ui-svelte";
</script>

<DirectionAwareHover
	imageUrl="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&q=80"
>
	<p class="text-xl font-bold">Mountain Peak</p>
	<p class="text-sm font-normal">Swiss Alps, Switzerland</p>
</DirectionAwareHover>
```

### Multiple Cards

```svelte
<script lang="ts">
	import { DirectionAwareHover } from "fancy-ui-svelte";
</script>

<div class="flex flex-wrap justify-center gap-6">
	<DirectionAwareHover
		imageUrl="https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=800&q=80"
		class="h-64 w-64"
	>
		<p class="text-lg font-bold">Nature</p>
		<p class="text-sm font-normal">Sunlit valley</p>
	</DirectionAwareHover>
	<DirectionAwareHover
		imageUrl="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?w=800&q=80"
		class="h-64 w-64"
	>
		<p class="text-lg font-bold">Desert</p>
		<p class="text-sm font-normal">Golden dunes</p>
	</DirectionAwareHover>
	<DirectionAwareHover
		imageUrl="https://images.unsplash.com/photo-1505765050516-f72dcac9c60e?w=800&q=80"
		class="h-64 w-64"
	>
		<p class="text-lg font-bold">Forest</p>
		<p class="text-sm font-normal">Autumn colors</p>
	</DirectionAwareHover>
</div>
```