Weekend in Lisbon
Three days of tiles, tarts and trams.
Image Swap Hover Effect
Hover crossfades to a second shot, the way shop grids show a product's other side, and a pager dot slides over to match. The second image settles from a slight zoom as it fades in.
Also known as: change image on hover, second image on hover, product image swap.
HTML
<div class="hfx-image-swap" role="img" aria-label="The same valley by day and by night"> <div class="hfx-image-swap-alt"></div> <span class="hfx-image-swap-dots" aria-hidden="true"></span> </div>
CSS
.hfx-image-swap {
--c: var(--hfx-color, #3b82f6);
font-size: var(--hfx-size, 16px);
position: relative;
width: 15em;
height: 9.5em;
border-radius: 0.75em;
overflow: hidden;
background:
radial-gradient(74% 44% at 20% 110%, color-mix(in srgb, var(--c) 42%, #0f172a) 99%, transparent),
radial-gradient(62% 36% at 90% 107%, color-mix(in srgb, var(--c) 56%, #0f172a) 99%, transparent),
conic-gradient(from 130deg at 72% 40%, transparent 0, color-mix(in srgb, var(--c) 80%, #1e293b) 0.4deg 99.6deg, transparent 100deg),
conic-gradient(from 118deg at 94% 55%, transparent 0, color-mix(in srgb, var(--c) 80%, #1e293b) 0.4deg 123.6deg, transparent 124deg),
conic-gradient(from 124deg at 30% 36%, transparent 0, color-mix(in srgb, var(--c) 48%, #fff) 0.4deg 111.6deg, transparent 112deg),
conic-gradient(from 126deg at 52% 50%, transparent 0, color-mix(in srgb, var(--c) 48%, #fff) 0.4deg 107.6deg, transparent 108deg),
radial-gradient(circle at 55% 27%, #fff 0 0.85em, rgb(255 255 255 / 0.45) 0.95em, transparent 3.2em),
linear-gradient(color-mix(in srgb, var(--c) 64%, #fff), color-mix(in srgb, var(--c) 12%, #fff7ed) 72%);
}
.hfx-image-swap-alt {
position: absolute;
inset: 0;
background:
radial-gradient(72% 42% at 22% 110%, color-mix(in srgb, var(--c) 10%, #020617) 99%, transparent),
radial-gradient(64% 36% at 86% 107%, color-mix(in srgb, var(--c) 14%, #020617) 99%, transparent),
conic-gradient(from 129deg at 70% 42%, transparent 0, color-mix(in srgb, var(--c) 22%, #0b1026) 0.4deg 101.6deg, transparent 102deg),
conic-gradient(from 118deg at 92% 54%, transparent 0, color-mix(in srgb, var(--c) 22%, #0b1026) 0.4deg 123.6deg, transparent 124deg),
conic-gradient(from 124deg at 28% 38%, transparent 0, color-mix(in srgb, var(--c) 36%, #111a3a) 0.4deg 111.6deg, transparent 112deg),
conic-gradient(from 126deg at 50% 52%, transparent 0, color-mix(in srgb, var(--c) 36%, #111a3a) 0.4deg 107.6deg, transparent 108deg),
radial-gradient(circle at 12% 18%, #fff 0 0.05em, transparent 0.09em),
radial-gradient(circle at 24% 30%, #fff 0 0.05em, transparent 0.09em),
radial-gradient(circle at 38% 12%, #fff 0 0.05em, transparent 0.09em),
radial-gradient(circle at 46% 26%, #fff 0 0.05em, transparent 0.09em),
radial-gradient(circle at 62% 16%, #fff 0 0.05em, transparent 0.09em),
radial-gradient(circle at 88% 22%, #fff 0 0.05em, transparent 0.09em),
radial-gradient(circle at 84% 40%, #fff 0 0.05em, transparent 0.09em),
radial-gradient(circle at 8% 42%, #fff 0 0.05em, transparent 0.09em),
radial-gradient(circle at 76% 24%, #f8fafc 0 0.65em, rgb(248 250 252 / 0.3) 0.75em, transparent 2.6em),
linear-gradient(color-mix(in srgb, var(--c) 20%, #020617), color-mix(in srgb, var(--c) 52%, #1e1b4b) 82%);
opacity: 0;
transform: scale(1.08);
transition: opacity 0.45s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.hfx-image-swap-dots {
position: absolute;
left: 50%;
bottom: 0.6em;
width: 1.3em;
height: 0.45em;
margin-left: -0.65em;
background:
radial-gradient(circle at 0.225em 50%, rgb(255 255 255 / 0.5) 0.2em, transparent 0.23em),
radial-gradient(circle at calc(100% - 0.225em) 50%, rgb(255 255 255 / 0.5) 0.2em, transparent 0.23em);
}
.hfx-image-swap-dots::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0.45em;
height: 0.45em;
border-radius: 50%;
background: #fff;
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hfx-image-swap:hover .hfx-image-swap-alt {
opacity: 1;
transform: none;
}
.hfx-image-swap:hover .hfx-image-swap-dots::after {
transform: translateX(0.85em);
}
@media (prefers-reduced-motion: reduce) {
.hfx-image-swap, .hfx-image-swap *, .hfx-image-swap::before, .hfx-image-swap::after, .hfx-image-swap *::before, .hfx-image-swap *::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.
<div class="group relative h-36 w-60 overflow-hidden rounded-xl bg-gradient-to-b from-sky-300 to-blue-600">
<div class="absolute inset-0 scale-110 bg-gradient-to-b from-slate-950 to-indigo-900 opacity-0 transition duration-500 group-hover:scale-100 group-hover:opacity-100"></div>
<span class="absolute bottom-2 left-1/2 flex -translate-x-1/2 gap-1.5">
<i class="size-1.5 rounded-full bg-white transition group-hover:bg-white/50"></i>
<i class="size-1.5 rounded-full bg-white/50 transition group-hover:bg-white"></i>
</span>
</div>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.