Weekend in Lisbon
Three days of tiles, tarts and trams.
Door Open Card Hover
A panelled door swings inward on its hinge to show a lit room and a message behind it. One element rotates on its left edge and dims as it turns; the frame and room stay flat.
Also known as: door opening animation css, 3d door hover, swing open reveal.
Come in
We're open
No. 7
HTML
<div class="hfx-door-open-card">
<div class="hfx-door-open-card-room">
<strong>Come in</strong>
<span>We're open</span>
</div>
<div class="hfx-door-open-card-door">
<span class="hfx-door-open-card-plate">No. 7</span>
<span class="hfx-door-open-card-knob"></span>
</div>
</div>CSS
.hfx-door-open-card {
--c: var(--hfx-color, #3b82f6);
font-size: var(--hfx-size, 16px);
position: relative;
width: 7.2em;
height: 10em;
padding: 0.4em 0.4em 0;
border-radius: 0.5em 0.5em 0 0;
background: color-mix(in srgb, var(--c) 55%, #000);
perspective: 25em;
font-family: system-ui, sans-serif;
}
.hfx-door-open-card::after {
content: "";
position: absolute;
left: -0.6em;
right: -0.6em;
bottom: -0.3em;
height: 0.3em;
border-radius: 0.15em;
background: color-mix(in srgb, var(--c) 40%, #000);
}
.hfx-door-open-card-room {
display: grid;
place-content: center;
gap: 0.15em;
height: 100%;
text-align: center;
border-radius: 0.25em 0.25em 0 0;
background: radial-gradient(130% 90% at 50% 100%, #fffbeb, #fde68a 55%, #f59e0b);
color: color-mix(in srgb, var(--c) 45%, #000);
padding-left: 1.2em;
}
.hfx-door-open-card-room strong {
font-size: 1.2em;
}
.hfx-door-open-card-room span {
font-size: 0.75em;
opacity: 0.8;
}
.hfx-door-open-card-door {
position: absolute;
inset: 0.4em 0.4em 0;
border-radius: 0.25em 0.25em 0 0;
background: linear-gradient(90deg, color-mix(in srgb, var(--c) 80%, #000), var(--c) 0.8em);
transform-origin: 0 50%;
transition: transform 0.75s cubic-bezier(0.55, 0, 0.2, 1), filter 0.75s ease;
}
.hfx-door-open-card-door::before,
.hfx-door-open-card-door::after {
content: "";
position: absolute;
left: 0.75em;
right: 0.75em;
border: 1px solid color-mix(in srgb, #fff 30%, transparent);
border-radius: 0.2em;
background: color-mix(in srgb, var(--c) 88%, #000);
box-shadow: inset 0 0.25em 0.4em color-mix(in srgb, #000 25%, transparent);
}
.hfx-door-open-card-door::before {
top: 1.9em;
height: 2.5em;
}
.hfx-door-open-card-door::after {
top: 5em;
bottom: 0.9em;
}
.hfx-door-open-card-plate {
position: absolute;
top: 0.55em;
left: 50%;
padding: 0.05em 0.45em;
border-radius: 0.3em;
background: #fef3c7;
color: #78350f;
font-size: 0.7em;
font-weight: 700;
white-space: nowrap;
transform: translateX(-50%);
}
.hfx-door-open-card-knob {
position: absolute;
top: 55%;
right: 0.5em;
width: 0.6em;
height: 0.6em;
border-radius: 50%;
background: radial-gradient(circle at 35% 35%, #fffbe6, #d4a017);
box-shadow: 0 0.1em 0.15em color-mix(in srgb, #000 35%, transparent);
}
.hfx-door-open-card:hover .hfx-door-open-card-door {
transform: rotateY(84deg);
filter: brightness(0.7);
}
@media (prefers-reduced-motion: reduce) {
.hfx-door-open-card, .hfx-door-open-card *, .hfx-door-open-card::before, .hfx-door-open-card::after, .hfx-door-open-card *::before, .hfx-door-open-card *::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.