DirectionAwareHover

Preview

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>

Installation

pnpm add fancy-ui-svelte

import { DirectionAwareHover } from 'fancy-ui-svelte'

Usage

svelte

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

<DirectionAwareHover />

Examples

Basic Usage

svelte

<script lang="ts">
	import { DirectionAwareHover } from "$lib/fancy-ui/direction-aware-hover";
</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 "$lib/fancy-ui/direction-aware-hover";
</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>

Props

Prop	Type	Default	Description
`imageUrl` *	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