DISCOVEREFFECTSPROMPTS
INTERACTION_027CSS
Navigation Underline
Underline grows from the origin side on hover.
Navigation / LightView
Back to library
INTERACTION_005
Text Swap.
Two stacked copies of the label move vertically in a clipped container so the text appears to roll over on hover.
- CATEGORY
- Buttons
- COMPLEXITY
- Easy
- TECH
- CSS
- PLATFORM
- Both
- PERFORMANCE
- Light
LIVE PLAYGROUND
CSS / CSS
.swap { position: relative; overflow: hidden; display: inline-flex; }
.swap span {
display: block;
transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
}
.swap span:last-child { position: absolute; inset: 0; transform: translateY(100%); }
.swap:hover span:first-child { transform: translateY(-100%); }
.swap:hover span:last-child { transform: translateY(0); }