Components
Direction Aware Hover New
Enhanced image card with content that slides in from the direction of the cursor.
Direction Aware Hover New
The DirectionAwareHoverNew component is an enhanced version of the DirectionAwareHover component that creates an image card with content that slides in from the direction of the cursor. It detects the direction of mouse entry and animates the content accordingly for a sophisticated user experience.
Usage
Creative Design
Innovative solutions for modern challenges
<template>
<MDirectionAwareHoverNew image-url="https://images.unsplash.com/photo-1587614382346-4ec70e388b28?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80">
<template #content>
<div class="space-y-3">
<UIcon name="i-heroicons-light-bulb" class="w-8 h-8 text-amber-400" />
<h3 class="text-2xl font-bold">Creative Design</h3>
<p class="text-white/80">Innovative solutions for modern challenges</p>
<UButton color="neutral" variant="solid" size="sm" class="mt-2">View Project</UButton>
</div>
</template>
</MDirectionAwareHoverNew>
</template>
Props
imageUrl
string required
URL of the image to display.
childrenClass
string
CSS classes to apply to the content container.
imageClass
string
CSS classes to apply to the image.
class
string
CSS classes to apply to the container.
Examples
Basic Direction Aware Hover New
Mountain Landscape
Beautiful scenic mountain view
<template>
<MDirectionAwareHoverNew image-url="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80">
<template #content>
<h3 class="text-xl font-bold">Mountain Landscape</h3>
<p class="text-white/80">Beautiful scenic mountain view</p>
</template>
</MDirectionAwareHoverNew>
</template>
Custom Content Styling
Ocean Photography
Professional underwater photography
<template>
<MDirectionAwareHoverNew
image-url="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80"
children-class="text-center"
>
<template #content>
<UIcon name="i-heroicons-camera" class="w-10 h-10 text-white mx-auto" />
<h3 class="text-2xl font-bold">Ocean Photography</h3>
<p class="text-white/80">Professional underwater photography</p>
</template>
</MDirectionAwareHoverNew>
</template>
Custom Image Styling
Forest Path
Peaceful walking trail through the woods
<template>
<MDirectionAwareHoverNew
image-url="https://images.unsplash.com/photo-1448375240586-882707db888b?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80"
image-class="object-top"
>
<template #content>
<h3 class="text-xl font-bold">Forest Path</h3>
<p class="text-white/80">Peaceful walking trail through the woods</p>
</template>
</MDirectionAwareHoverNew>
</template>
Custom Container Sizing
City Skyline
Urban landscape at dusk
<template>
<MDirectionAwareHoverNew
image-url="https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80"
class="w-80 h-80"
>
<template #content>
<h3 class="text-2xl font-bold">City Skyline</h3>
<p class="text-white/80">Urban landscape at dusk</p>
</template>
</MDirectionAwareHoverNew>
</template>