Direction Aware Hover

A direction aware hover card, that displays an image with dynamic hover effects and customizable content overlay.

API

Prop NameTypeDefaultDescription
imageUrlstringRequiredThe URL of the image to be displayed.
classstringundefinedAdditional CSS classes for the card container.
imageClassstringundefinedAdditional CSS classes for the image element.
childrenClassstringundefinedAdditional CSS classes for the content overlay.

Component Code

You can copy and paste the following code to create this component:

DirectionAwareHover.vue

Credits

Container Scroll
A container scrolling effect that transforms the content inside based on scroll progress. Features smooth transitions with scaling and rotating effects on scroll.
Dock
A macOS-style dock with magnifying icons as you hover over them.