[FEATURE] [FEATURE] Add Hover Reveal Text Utility

[aparna24bce11388]

Feature Name

Hover Reveal Text Utility

---

Description

Introduce a reusable Hover Reveal Text Utility that smoothly reveals hidden or secondary text when a user hovers over an element. The text fades in while sliding upward, creating a clean and modern interaction. This utility is ideal for buttons, cards, portfolio items, product showcases, feature sections, and interactive UI components.

---

Why is this useful for EaseMotion CSS?

This utility aligns with EaseMotion CSS's animation-first philosophy by providing a lightweight, reusable, and human-readable hover effect. Developers can reveal additional information using a single CSS class without relying on JavaScript, making interfaces more engaging while keeping the implementation simple and composable.

---

HTML Snippet

<div class="hover-reveal-text">
  <span class="primary-text">Hover Me</span>
  <span class="secondary-text">Welcome!</span>
</div>

---

CSS Snippet

.hover-reveal-text {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.primary-text,
.secondary-text {
  display: block;
  transition: all 0.35s ease;
}

.secondary-text {
  position: absolute;
  left: 0;
  top: 100%;
  opacity: 0;
}

.hover-reveal-text:hover .primary-text {
  transform: translateY(-100%);
  opacity: 0;
}

.hover-reveal-text:hover .secondary-text {
  top: 0;
  opacity: 1;
}

---

Visual Reference (optional)

Similar to the text reveal animations commonly used on modern portfolio websites, call-to-action buttons, landing pages, and interactive navigation elements.

---

Checklist

• This feature does not duplicate an existing EaseMotion CSS class
• I understand my naming will be standardized by the maintainer
• I will submit code inside submissions/ only — not in core/ or components/

[github-actions]

Hey @aparna24bce11388! 👋

Thanks for opening this issue — you've been auto-assigned to it.

Before you start coding, please read the quick checklist:

• Make sure no existing issue already covers this idea
• Read the Contribution Guide before opening a PR
• Add files only inside the submissions/ directory (e.g., submissions/examples/your-feature-name/ or submissions/docs/your-feature-name/)
• Include demo.html · style.css · README.md in your folder
• Max 25 active issues per contributor — unassign others before taking new ones
• Join our official Discord Server (Optional - for general developer chat and support; official issues belong on GitHub!)

🕑 Inactivity rule: Issues with no progress for 24 hours (1 day) will be unassigned and reopened for others.

The maintainer will review your PR once submitted. Good luck! ⚡