Circle Reveal Text Hover
A circle opens from the middle of the word and, inside it, the heavy sans turns into an accent serif italic. One registered @property radius drives both the clip-path and the mask.
Also known as: font swap on hover, radial text reveal, circle mask text.
Hello
HTML
<div class="hfx-text-circle-reveal" data-text="Hello"><span>Hello</span></div>
CSS
@property --hfx-text-circle-reveal-r {
syntax: "<length>";
inherits: true;
initial-value: 0px;
}
.hfx-text-circle-reveal {
--c: var(--hfx-color, #3b82f6);
font-size: calc(var(--hfx-size, 16px) * 2.5);
font-family: system-ui, sans-serif;
font-weight: 800;
line-height: 1.15;
cursor: default;
display: inline-grid;
place-items: center;
transition: --hfx-text-circle-reveal-r 0.7s cubic-bezier(0.65, 0, 0.35, 1);}
.hfx-text-circle-reveal > span,
.hfx-text-circle-reveal::after { grid-area: 1 / 1; }
.hfx-text-circle-reveal > span {
-webkit-mask-image: radial-gradient(circle, transparent var(--hfx-text-circle-reveal-r), #000 calc(var(--hfx-text-circle-reveal-r) + 0.02em));
mask-image: radial-gradient(circle, transparent var(--hfx-text-circle-reveal-r), #000 calc(var(--hfx-text-circle-reveal-r) + 0.02em));
}
.hfx-text-circle-reveal::after {
content: attr(data-text);
font-family: Georgia, "Times New Roman", serif;
font-style: italic;
font-weight: 700;
color: var(--c);
clip-path: circle(var(--hfx-text-circle-reveal-r));
}
.hfx-text-circle-reveal:hover { --hfx-text-circle-reveal-r: 1.6em; }
@media (prefers-reduced-motion: reduce) {
.hfx-text-circle-reveal, .hfx-text-circle-reveal *, .hfx-text-circle-reveal::before, .hfx-text-circle-reveal::after, .hfx-text-circle-reveal *::before, .hfx-text-circle-reveal *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--hfx-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--hfx-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.