The HoverReveal component displays hidden content when the user hovers over a container.
It is useful for interactive cards, previews, or tooltips that appear on hover.

• Interactive content: Reveal buttons, cards, text, or images on hover.
• Customizable layout: Works with links, components, or any HTML content.
• Smooth transitions: Provides visually appealing hover animations.
• Flexible design: Can be used for previews, galleries, or call-to-action overlays.

Usage Example

Preview

test

Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae ab est ipsa corporis fuga libero temporibus inventore exercitationem pariatur. Soluta minima suscipit perferendis enim cumque atque iusto obcaecati maiores consectetur!

reveal

Code

<script lang="ts">
  import { Button, Card, HoverReveal } from "@fefade-ui/svelte"
</script>

<div style="max-width: 300px; margin: 0 auto;">
  <HoverReveal href="/">
    <Card>
      <h1>test</h1>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae ab
        est ipsa corporis fuga libero temporibus inventore exercitationem
        pariatur. Soluta minima suscipit perferendis enim cumque atque iusto
        obcaecati maiores consectetur!
      </p>
    </Card>

    {#snippet reveal()}
      <Button>reveal</Button>
    {/snippet}
  </HoverReveal>
</div>

Props

Prop	Type	Default	Description
href	string	""	Optional link for the container.
children	Required	Content that is always visible inside the container.
reveal	Optional	Content that appears on hover.

Best Practices

• Use concise reveal content to avoid overwhelming users.
• Combine with Cards, Images, or Buttons for interactive previews.
• Ensure hover effects are smooth and responsive on different screen sizes.
• Avoid placing essential information exclusively in the hover content.
• Use links and buttons accessibly, with clear focus and hover states.