Map Pin Hover Effect
A pin on a small drawn map that hops up on hover while its shadow shrinks, then pops a place card above itself. The map is layered gradients, so the whole thing is a few divs.
Also known as: map marker hover css, location pin bounce, map pin tooltip.
HTML
<div class="hfx-map-pin"> <span class="hfx-map-pin-dot" style="--x: 22%; --y: 34%"></span> <span class="hfx-map-pin-dot" style="--x: 80%; --y: 70%"></span> <a class="hfx-map-pin-pin" href="#" aria-label="Blue Door Coffee"><svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M12 23s8-7 8-13.2A8 8 0 0 0 4 9.8C4 16 12 23 12 23z"/><circle cx="12" cy="9.8" r="3.2" fill="#fff"/></svg><span>Blue Door Coffee <b>4.8</b></span></a> </div>
CSS
.hfx-map-pin {
--c: var(--hfx-color, #3b82f6);
font-size: var(--hfx-size, 16px);
position: relative;
width: 20em;
height: 10.5em;
border-radius: 0.8em;
background:
linear-gradient(28deg, transparent 47%, #fff 47% 50.5%, transparent 50.5%),
linear-gradient(-62deg, transparent 58%, #fff 58% 60.5%, transparent 60.5%),
radial-gradient(ellipse 30% 40% at 12% 88%, color-mix(in srgb, var(--c) 30%, #fff) 0 98%, transparent 100%),
radial-gradient(ellipse 26% 30% at 88% 14%, color-mix(in srgb, #86efac 70%, var(--c)) 0 98%, transparent 100%),
repeating-linear-gradient(0deg, transparent 0 1.9em, rgba(255, 255, 255, 0.6) 1.9em 2em),
repeating-linear-gradient(90deg, transparent 0 1.9em, rgba(255, 255, 255, 0.6) 1.9em 2em),
color-mix(in srgb, var(--c) 8%, #eef2f7);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
font-family: system-ui, sans-serif;
}
.hfx-map-pin-dot {
position: absolute;
left: var(--x);
top: var(--y);
width: 0.8em;
height: 0.8em;
margin: -0.4em 0 0 -0.4em;
border: 2px solid #fff;
border-radius: 50%;
background: color-mix(in srgb, var(--c) 70%, transparent);
}
.hfx-map-pin-pin {
position: absolute;
left: 50%;
top: 64%;
width: 2.4em;
height: 2.4em;
margin: -2.4em 0 0 -1.2em;
color: var(--c);
}
/* the shadow on the ground */
.hfx-map-pin-pin::before {
content: "";
position: absolute;
left: 50%;
top: 100%;
width: 1.2em;
height: 0.4em;
margin: -0.2em 0 0 -0.6em;
border-radius: 50%;
background: radial-gradient(closest-side, rgba(15, 23, 42, 0.45), transparent);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}
.hfx-map-pin-pin svg {
display: block;
width: 100%;
height: 100%;
filter: drop-shadow(0 0.1em 0.15em rgba(15, 23, 42, 0.3));
transform-origin: 50% 100%;
transition: transform 0.4s cubic-bezier(0.34, 1.8, 0.64, 1);
}
.hfx-map-pin-pin span {
position: absolute;
bottom: calc(100% + 0.9em);
left: 50%;
padding: 0.4em 0.7em;
border-radius: 0.5em;
background: #fff;
box-shadow: 0 0.5em 1em -0.4em rgba(15, 23, 42, 0.4);
color: #1f2937;
font-size: 0.8em;
font-weight: 600;
white-space: nowrap;
opacity: 0;
transform: translate(-50%, 0.8em) scale(0.8);
transform-origin: 50% 100%;
transition: opacity 0.2s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hfx-map-pin-pin b {
margin-left: 0.3em;
color: var(--c);
}
.hfx-map-pin-pin b::before { content: "\2605 "; }
.hfx-map-pin-pin:is(:hover, :focus-visible) svg { transform: translateY(-0.6em) scale(1.1); }
.hfx-map-pin-pin:is(:hover, :focus-visible)::before {
opacity: 0.6;
transform: scale(0.6);
}
.hfx-map-pin-pin:is(:hover, :focus-visible) span {
opacity: 1;
transform: translate(-50%, 0) scale(1);
transition-delay: 0.08s;
}
@media (prefers-reduced-motion: reduce) {
.hfx-map-pin, .hfx-map-pin *, .hfx-map-pin::before, .hfx-map-pin::after, .hfx-map-pin *::before, .hfx-map-pin *::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.