April 8, 2026SimpleHover & 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.
Preview
Source
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 & Development Studio</p>
<h1 className={styles.heading}>Crafting Digital<br />Experiences</h1>
</div>
</div>
);
}