April 8, 2026/Simple/Hover & Reveals

Label Rollover

Two identical text labels stacked vertically in an overflow-hidden container. On hover the stack slides up revealing the duplicate below, creating an infinite-loop text swap effect. Pure CSS.

import LabelRollover from "./index.jsx";
import { labelRollover } from "../demo-data.js";
import styles from "./demo.module.css";

export default function LabelRolloverDemo() {
  return (
    <div className={styles.demo}>
      <header className={styles.header}>
        <span className={styles.logo}>No. 5</span>
        <LabelRollover {...labelRollover} />
        <span className={styles.cta}>Get in touch</span>
      </header>
      <div className={styles.hero}>
        <p className={styles.label}>Design &amp; Development Studio</p>
        <h1 className={styles.heading}>Crafting Digital<br />Experiences</h1>
      </div>
    </div>
  );
}

Related Components

3MO AGO
Pixelate Imagehover-reveals
3MO AGO
Reveal Grouphover-reveals
3MO AGO
Clip-Path Inset Revealhover-reveals