Directional
Direction Aware Hover
Card that reveals content based on the direction of mouse entry with smooth animations.
The DirectionAwareHover component creates a card that reveals content based on the direction of mouse entry with smooth animations.
Usage
<template>
<div class="flex justify-center">
<MDirectionAwareHover image-url="https://images.unsplash.com/photo-1550745165-9bc0b252726f?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80">
<template #content>
<div class="space-y-3">
<UIcon
name="i-heroicons-computer-desktop"
class="w-8 h-8 text-primary"
/>
<h3 class="text-2xl font-bold">
Web Development
</h3>
<p class="text-white/80">
Modern responsive websites and applications
</p>
<UButton
color="neutral"
variant="solid"
size="sm"
class="mt-2"
>
View Project
</UButton>
</div>
</template>
</MDirectionAwareHover>
</div>
</template>
Examples
Basic Direction Aware Hover
Creative Portfolio
Featured Projects
Explore our portfolio of creative work and innovative solutions that showcase our expertise and vision
Want to see more of our work?
Browse our complete portfolio to discover how we've helped businesses transform their digital presence.
<template>
<div class="p-8 bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800">
<div class="max-w-6xl mx-auto">
<div class="text-center mb-12">
<div class="inline-flex items-center gap-2 px-4 py-2 bg-primary/10 dark:bg-primary/30 rounded-full mb-4">
<UIcon
name="i-lucide-image"
class="w-5 h-5 text-primary"
/>
<span class="text-primary font-medium">Creative Portfolio</span>
</div>
<h2 class="text-4xl font-bold text-highlighted mb-4">
Featured Projects
</h2>
<p class="text-xl text-muted max-w-3xl mx-auto">
Explore our portfolio of creative work and innovative solutions that showcase our expertise and vision
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
<MDirectionAwareHover
v-for="(project, index) in projects"
:key="index"
:image-url="project.image"
class="w-full h-80 rounded-2xl overflow-hidden shadow-xl"
>
<template #content>
<div class="space-y-4 p-6">
<div class="flex items-center gap-2 mb-2">
<div class="w-8 h-8 rounded-lg bg-default/20 flex items-center justify-center">
<UIcon
:name="project.icon"
class="w-4 h-4 text-white"
/>
</div>
<UBadge
:color="project.categoryColor"
variant="solid"
size="xs"
>
{{ project.category }}
</UBadge>
</div>
<h3 class="text-2xl font-bold text-white">
{{ project.title }}
</h3>
<p class="text-white/90">
{{ project.description }}
</p>
<div class="flex flex-wrap gap-2 mt-4">
<div
v-for="tag in project.tags"
:key="tag"
class="px-2 py-1 bg-default/20 rounded text-xs text-white"
>
{{ tag }}
</div>
</div>
<div class="flex gap-3 mt-6">
<UButton
color="primary"
variant="solid"
size="sm"
@click="viewProject(project)"
>
View Project
</UButton>
<UButton
color="primary"
variant="ghost"
size="sm"
@click="likeProject(project)"
>
<UIcon
name="i-lucide-heart"
class="w-4 h-4"
/>
</UButton>
</div>
</div>
</template>
</MDirectionAwareHover>
</div>
<div class="bg-default rounded-2xl shadow-lg p-8 border border-default">
<div class="flex flex-col md:flex-row items-center gap-8">
<div class="flex-1">
<h3 class="text-2xl font-bold text-highlighted mb-4">
Want to see more of our work?
</h3>
<p class="text-muted mb-6">
Browse our complete portfolio to discover how we've helped businesses transform their digital presence.
</p>
<div class="flex flex-wrap gap-4">
<UButton
size="lg"
color="primary"
>
View Full Portfolio
</UButton>
<UButton
size="lg"
variant="outline"
>
Contact Us
</UButton>
</div>
</div>
<div class="flex-1">
<div class="grid grid-cols-3 gap-4">
<div class="aspect-square rounded-xl overflow-hidden">
<img
src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80"
alt="Project"
class="w-full h-full object-cover"
>
</div>
<div class="aspect-square rounded-xl overflow-hidden">
<img
src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80"
alt="Project"
class="w-full h-full object-cover"
>
</div>
<div class="aspect-square rounded-xl overflow-hidden">
<img
src="https://images.unsplash.com/photo-1433086966358-54859d0ed716?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80"
alt="Project"
class="w-full h-full object-cover"
>
</div>
<div class="aspect-square rounded-xl overflow-hidden">
<img
src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80"
alt="Project"
class="w-full h-full object-cover"
>
</div>
<div class="aspect-square rounded-xl overflow-hidden">
<img
src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80"
alt="Project"
class="w-full h-full object-cover"
>
</div>
<div class="aspect-square rounded-xl overflow-hidden">
<img
src="https://images.unsplash.com/photo-1433086966358-54859d0ed716?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80"
alt="Project"
class="w-full h-full object-cover"
>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
const projects = [
{
title: 'Mountain Landscape',
description: 'Beautiful scenic mountain view with stunning natural beauty captured in high resolution',
image: 'https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80',
icon: 'i-lucide-mountain',
category: 'Nature',
categoryColor: 'green',
tags: ['Photography', 'Landscape', 'Outdoor'],
},
{
title: 'Alpine Adventure',
description: 'Thrilling mountain climbing experience in the Swiss Alps with breathtaking views',
image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80',
icon: 'i-lucide-zap',
category: 'Adventure',
categoryColor: 'blue',
tags: ['Climbing', 'Alps', 'Extreme'],
},
{
title: 'Forest Exploration',
description: 'Deep forest trails and natural wildlife encounters in the Pacific Northwest',
image: 'https://images.unsplash.com/photo-1433086966358-54859d0ed716?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80',
icon: 'i-lucide-tree-pine',
category: 'Wildlife',
categoryColor: 'emerald',
tags: ['Nature', 'Wildlife', 'Exploration'],
},
{
title: 'Urban Architecture',
description: 'Modern cityscapes and architectural marvels captured in urban environments',
image: 'https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80',
icon: 'i-lucide-building',
category: 'Architecture',
categoryColor: 'purple',
tags: ['City', 'Modern', 'Design'],
},
{
title: 'Ocean Waves',
description: 'Dramatic coastal scenes with powerful waves and stunning seascapes',
image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80',
icon: 'i-lucide-waves',
category: 'Seascape',
categoryColor: 'cyan',
tags: ['Ocean', 'Coastal', 'Water'],
},
{
title: 'Desert Dunes',
description: 'Golden sand dunes and desert landscapes under dramatic lighting conditions',
image: 'https://images.unsplash.com/photo-1433086966358-54859d0ed716?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80',
icon: 'i-lucide-sun',
category: 'Desert',
categoryColor: 'orange',
tags: ['Sand', 'Dunes', 'Sunset'],
},
]
const viewProject = (project) => {
// In a real implementation, this would navigate to the project page
console.log('Viewing project:', project.title)
alert(`Viewing project: ${project.title}`)
}
const likeProject = (project) => {
// In a real implementation, this would like the project
console.log('Liked project:', project.title)
alert(`Liked project: ${project.title}`)
}
</script>
Customize
Customize
Image Urlhttps://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=600&q=80
Children Class
Image Class
Props
| Prop | Type | Default | Description |
|---|---|---|---|
imageUrlrequired | string | - | URL of the image to display as the card background. |
childrenClass | string | '' | CSS classes to apply to the content container. |
imageClass | string | '' | CSS classes to apply to the image. |
class | string | 'md:h-96 w-60 h-60 md:w-96' | CSS classes to apply to the card container. |
UI
This component's theme exposes the slots below. Override any of them per instance with the ui prop, or app-wide under ui.directionAwareHover in app.config.ts.
| Prop | Type | Default | Description |
|---|---|---|---|
ui | object | - | Per-slot classes merged over the theme defaults. |
| Slot | Props | Description |
|---|---|---|
root | - | bg-transparent rounded-lg overflow-hidden group/card relative cursor-pointer |
imageWrapper | - | absolute inset-0 rounded-lg overflow-hidden |
image | - | w-full h-full object-cover |
overlay | - | absolute inset-0 bg-default/40 opacity-0 group-hover/card:opacity-100 transition-opacity duration-500 |
content | - | absolute inset-0 z-10 p-4 flex items-end |
text | - | text-inverted w-full |
details | - | space-y-2 |
title | - | text-xl font-bold |
description | - | text-inverted/80 |
button | - | bg-default text-default hover:bg-default/90 |