Hover Glint
Interactive & Advanced · Static · pure CSS
A bright diagonal highlight sweeps across the word on hover, like light catching glass. CSS-only, no JavaScript; the resting state is clean.
CSS
/* Hover Glint — generated with TEXT-FX
* HTML: just put the class on any element.
* Font: 'Syne', sans-serif (load from Google Fonts).
*/
.text-effect {
font-family: 'Syne', sans-serif;
font-weight: 700;
letter-spacing: 0px;
text-transform: none;
}
.text-effect {
position: relative;
overflow: hidden;
color: hsl(237 35% 84%);
cursor: pointer;
}
.text-effect::before {
content: "";
position: absolute;
top: 0;
left: -75%;
width: 50%;
height: 100%;
background: linear-gradient(115deg, transparent 0%, hsl(0 0% 100% / 0.7) 50%, transparent 100%);
transform: skewX(-18deg);
transition: left 0.72s ease;
pointer-events: none;
}
.text-effect:hover::before {
left: 125%;
}
Pure CSS — just add the .text-effect class to any element.
- Category
- Interactive & Advanced
- Type
- Static
- Browser support
- Glint sweeps on :hover via an overflow-clipped ::before bar — static preview is clean.
- Capabilities
- pure