Web development
Fast, accessible sites built to last.
Learn more
Circle Fill Card Hover
The accent circle behind the icon grows until it floods the whole card, and the text flips to white. It is one pseudo-element scaled up from the icon's position, so nothing reflows.
Also known as: service card hover effect, card background fill from icon, expanding circle card.
HTML
<article class="hfx-card-circle-fill"> <span class="hfx-card-circle-fill-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m8 7-5 5 5 5M16 7l5 5-5 5M13.5 5l-3 14"/></svg></span> <h3>Web development</h3> <p>Fast, accessible sites built to last.</p> <span class="hfx-card-circle-fill-more">Learn more</span> </article>
CSS
.hfx-card-circle-fill {
--c: var(--hfx-color, #3b82f6);
font-size: var(--hfx-size, 16px);
width: 15em;
border-radius: 0.75em;
overflow: hidden;
background: #fff;
border: 1px solid color-mix(in srgb, #000 10%, transparent);
color: #1f2937;
font-family: system-ui, sans-serif;
position: relative;
isolation: isolate;
box-sizing: border-box;
width: 13em;
padding: 1.2em 1.2em 1.1em;
transition: color 0.35s ease;}
.hfx-card-circle-fill::before {
content: "";
position: absolute;
top: 1.2em;
left: 1.2em;
z-index: -1;
width: 2.6em;
height: 2.6em;
border-radius: 50%;
background: linear-gradient(135deg, color-mix(in srgb, var(--c) 80%, #fff), color-mix(in srgb, var(--c) 80%, #000));
transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.hfx-card-circle-fill:hover { color: #fff; }
.hfx-card-circle-fill:hover::before { transform: scale(11); }
.hfx-card-circle-fill-icon {
display: grid;
place-items: center;
width: 2.6em;
height: 2.6em;
margin-bottom: 0.8em;
border-radius: 50%;
color: #fff;
transition: box-shadow 0.4s ease 0.2s;
}
.hfx-card-circle-fill:hover .hfx-card-circle-fill-icon { box-shadow: inset 0 0 0 0.12em color-mix(in srgb, #fff 55%, transparent); }
.hfx-card-circle-fill-icon svg {
width: 1.2em;
height: 1.2em;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.hfx-card-circle-fill h3 {
margin: 0 0 0.25em;
font-size: 1em;
font-weight: 600;
}
.hfx-card-circle-fill p {
margin: 0;
font-size: 0.8em;
line-height: 1.45;
color: #6b7280;
transition: color 0.35s ease;
}
.hfx-card-circle-fill:hover p { color: color-mix(in srgb, #fff 85%, transparent); }
.hfx-card-circle-fill-more {
display: inline-block;
margin-top: 0.8em;
font-size: 0.75em;
font-weight: 700;
color: var(--c);
transition: color 0.35s ease;
}
.hfx-card-circle-fill-more::after {
content: "\2192";
display: inline-block;
margin-left: 0.3em;
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hfx-card-circle-fill:hover .hfx-card-circle-fill-more { color: #fff; }
.hfx-card-circle-fill:hover .hfx-card-circle-fill-more::after { transform: translateX(0.3em); }
@media (prefers-reduced-motion: reduce) {
.hfx-card-circle-fill, .hfx-card-circle-fill *, .hfx-card-circle-fill::before, .hfx-card-circle-fill::after, .hfx-card-circle-fill *::before, .hfx-card-circle-fill *::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.