Side Overlay Card Hover
An accent panel slides across the photo from the left while the photo drifts the other way, then its lines arrive one by one. Good for listings where the details matter more than the picture.
Also known as: overlay slide from left, card hover slide in panel, info panel on hover.
HTML
<article class="hfx-card-slide-panel">
<div class="hfx-card-slide-panel-image"></div>
<h3 class="hfx-card-slide-panel-title">Casa do Mar</h3>
<div class="hfx-card-slide-panel-panel">
<h3 style="--i: 0">Casa do Mar</h3>
<p style="--i: 1">Grilled fish and clams on a terrace over the bay.</p>
<a href="#" style="--i: 2">Book a table</a>
</div>
</article>CSS
.hfx-card-slide-panel {
--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;
width: 14em;
height: 9em;
border: 0;}
.hfx-card-slide-panel-image {
position: absolute;
inset: 0 -1.5em 0 0;
background: radial-gradient(120% 70% at 18% 100%, color-mix(in srgb, var(--c) 75%, #000) 0 50%, transparent 51%),
radial-gradient(140% 80% at 88% 100%, color-mix(in srgb, var(--c) 50%, #fff) 0 50%, transparent 51%),
radial-gradient(circle at 70% 38%, #fff7d6 0 12%, transparent 13%),
linear-gradient(to bottom, color-mix(in srgb, var(--c) 30%, #fff), color-mix(in srgb, var(--c) 55%, #fff));
transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hfx-card-slide-panel:is(:hover, :focus-within) .hfx-card-slide-panel-image { transform: translateX(-1.5em); }
.hfx-card-slide-panel-title {
position: absolute;
inset: auto 0 0;
margin: 0;
padding: 1.6em 1em 0.8em;
background: linear-gradient(to top, color-mix(in srgb, #000 55%, transparent), transparent);
color: #fff;
font-size: 1em;
font-weight: 600;
transition: opacity 0.3s ease;
}
.hfx-card-slide-panel:is(:hover, :focus-within) .hfx-card-slide-panel-title { opacity: 0; }
.hfx-card-slide-panel-panel {
position: absolute;
inset: 0 34% 0 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.45em;
box-sizing: border-box;
padding: 1em;
background: var(--c);
color: #fff;
transform: translateX(-101%);
transition: transform 0.5s cubic-bezier(0.7, 0, 0.2, 1);
}
.hfx-card-slide-panel:is(:hover, :focus-within) .hfx-card-slide-panel-panel { transform: none; }
.hfx-card-slide-panel-panel > * {
margin: 0;
opacity: 0;
transform: translateX(-0.8em);
transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hfx-card-slide-panel:is(:hover, :focus-within) .hfx-card-slide-panel-panel > * {
opacity: 1;
transform: none;
transition-delay: calc(0.25s + var(--i) * 70ms);
}
.hfx-card-slide-panel-panel h3 {
font-size: 1em;
font-weight: 600;
}
.hfx-card-slide-panel-panel p {
font-size: 0.76em;
line-height: 1.4;
color: color-mix(in srgb, #fff 85%, transparent);
}
.hfx-card-slide-panel-panel a {
margin-top: auto;
padding: 0.45em 0.8em;
border-radius: 0.45em;
background: #fff;
color: var(--c);
font-size: 0.72em;
font-weight: 700;
text-decoration: none;
}
@media (prefers-reduced-motion: reduce) {
.hfx-card-slide-panel, .hfx-card-slide-panel *, .hfx-card-slide-panel::before, .hfx-card-slide-panel::after, .hfx-card-slide-panel *::before, .hfx-card-slide-panel *::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.