Free shipping
On orders over $50.
Delivered in 2 to 4 business days with tracking, and returns stay free for 30 days.
Expanding Card Hover
A compact card that grows to reveal an extra paragraph while its chevron turns. It animates grid-template-rows from 0fr to 1fr, so the height is measured for you with no max-height guess.
Also known as: card expand on hover css, show more on hover card, grid template rows animation.
HTML
<article class="hfx-card-expand-details">
<div class="hfx-card-expand-details-head">
<span class="hfx-card-expand-details-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 7h11v9H3zM14 10h4l3 3v3h-7"/><circle cx="7" cy="17.5" r="1.8"/><circle cx="17" cy="17.5" r="1.8"/></svg></span>
<div>
<h3>Free shipping</h3>
<p>On orders over $50.</p>
</div>
<svg class="hfx-card-expand-details-chevron" viewBox="0 0 24 24" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>
</div>
<div class="hfx-card-expand-details-more">
<div><p>Delivered in 2 to 4 business days with tracking, and returns stay free for 30 days.</p></div>
</div>
</article>CSS
.hfx-card-expand-details {
--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;
box-sizing: border-box;
width: 17em;
padding: 0.9em 1em;
transition: box-shadow 0.35s ease, border-color 0.35s ease;}
.hfx-card-expand-details:hover {
border-color: color-mix(in srgb, var(--c) 35%, transparent);
box-shadow: 0 0.8em 1.4em -0.9em color-mix(in srgb, #000 30%, transparent);
}
.hfx-card-expand-details-head {
display: flex;
align-items: center;
gap: 0.75em;
}
.hfx-card-expand-details-icon {
display: grid;
flex: none;
place-items: center;
width: 2.3em;
height: 2.3em;
border-radius: 0.6em;
background: color-mix(in srgb, var(--c) 12%, transparent);
color: var(--c);
}
.hfx-card-expand-details svg {
width: 1.2em;
height: 1.2em;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.hfx-card-expand-details h3 {
font-weight: 600;
margin: 0;
font-size: 0.95em;
}
.hfx-card-expand-details p {
margin: 0.1em 0 0;
font-size: 0.78em;
line-height: 1.45;
color: #6b7280;
}
.hfx-card-expand-details-chevron {
margin-left: auto;
color: #9ca3af;
transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.3s ease;
}
.hfx-card-expand-details:hover .hfx-card-expand-details-chevron {
color: var(--c);
transform: rotate(180deg);
}
.hfx-card-expand-details-more {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hfx-card-expand-details:hover .hfx-card-expand-details-more { grid-template-rows: 1fr; }
.hfx-card-expand-details-more > div {
min-height: 0;
overflow: hidden;
}
.hfx-card-expand-details-more p {
margin: 0;
padding: 0.75em 0 0.1em 3.95em;
opacity: 0;
transform: translateY(-0.4em);
transition: opacity 0.25s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hfx-card-expand-details:hover .hfx-card-expand-details-more p {
opacity: 1;
transform: none;
transition-delay: 0.1s;
}
@media (prefers-reduced-motion: reduce) {
.hfx-card-expand-details, .hfx-card-expand-details *, .hfx-card-expand-details::before, .hfx-card-expand-details::after, .hfx-card-expand-details *::before, .hfx-card-expand-details *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Tailwind CSS version
The same effect using Tailwind utility classes. No custom CSS or config needed.
<article class="group w-72 rounded-xl border bg-white p-4 transition duration-300 hover:border-blue-300 hover:shadow-lg">
<div class="flex items-center gap-3">
<span class="grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-blue-50 text-blue-500">
<svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M3 7h11v9H3zM14 10h4l3 3v3h-7"/><circle cx="7" cy="17.5" r="1.8"/><circle cx="17" cy="17.5" r="1.8"/></svg>
</span>
<div>
<h3 class="text-sm font-semibold">Free shipping</h3>
<p class="text-xs text-gray-500">On orders over $50.</p>
</div>
<svg class="ml-auto h-5 w-5 text-gray-400 transition duration-300 group-hover:rotate-180 group-hover:text-blue-500" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></svg>
</div>
<div class="grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 group-hover:grid-rows-[1fr]">
<div class="overflow-hidden">
<p class="pl-12 pt-3 text-xs leading-relaxed text-gray-500 opacity-0 transition duration-300 group-hover:opacity-100">Delivered in 2 to 4 business days with tracking, and returns stay free for 30 days.</p>
</div>
</div>
</article>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.