feat: add Before/After Image Comparison Slider (#1199)

[Pcmhacker-piro]

Closes #1199

Pull Request Description

Adds a before/after image comparison slider in submissions/examples/image-comparison/ with a draggable vertical handle, mouse/touch/keyboard support, and "Before"/"After" labels.

---

Type of Change

• 🧩 New component

---

Submission Checklist

• All changes are inside submissions/examples/image-comparison/
• Includes demo.html — self-contained, opens in browser with no server
• Includes style.css — raw CSS for the proposed feature
• Includes README.md — what it does, how to use it, why it fits EaseMotion CSS
• No changes to core/
• No changes to components/
• One feature per PR (no bundled unrelated changes)

---

Feature Description

What does this add?

A before/after image comparison slider where users drag a vertical handle (or use arrow keys) to reveal more of one image or the other.

How does a developer use it?

<div class="ease-image-comparison" role="slider" aria-valuenow="50" tabindex="0">
  <img class="ease-image-comparison-after" src="after.jpg" alt="After" draggable="false" />
  <div class="ease-image-comparison-before">
    <img src="before.jpg" alt="Before" draggable="false" />
  </div>
  <div class="ease-image-comparison-handle" tabindex="-1"></div>
  <span class="ease-image-comparison-label ease-image-comparison-label--before">Before</span>
  <span class="ease-image-comparison-label ease-image-comparison-label--after">After</span>
</div>
Why does it fit EaseMotion CSS?
Pure CSS styling with clip-based overlay, circular handle grip with SVG arrows, hover scale effect on the grip, and responsive inline-block layout. Respects prefers-reduced-motion.
Demo
- Demo added (demo.html works by opening directly in a browser)
Browser Testing
- Chrome
- Firefox
- Edge
- Safari (optional but appreciated)
Notes for Maintainer
Inline JS handles mouse drag, touch drag, and arrow key navigation (Shift+arrow = 10px step, arrow = 2px step). Uses role="slider" with aria-valuenow for accessibility. The handle uses an inline SVG background-image for the left/right arrows.

[github-actions]

✅ Submission Validation Passed!

Great job! All required files are present.

📁 Folder: submissions/examples/image-comparison

Files found:

• ✅ demo.html
• ✅ style.css
• ✅ README.md

🚀 Next Steps:

• The maintainer will review your PR
• Respond to any feedback if requested
• Once approved, your contribution will be merged!

Thank you for contributing to EaseMotion CSS! 🎉

[Pcmhacker-piro]

heyy @SAPTARSHI-coder

i fixed the assigned issue so pls check thsi