Weekend in Lisbon
Three days of tiles, tarts and trams.
Scrolling Screenshot Image Hover
A browser window holding a tall page screenshot that scrolls to the bottom while hovered and glides back when you leave. A portfolio classic: one transform, 3 seconds down, 0.8 back.
Also known as: scroll image on hover, website screenshot scroll, portfolio page preview.
HTML
<div class="hfx-image-scroll-page" role="img" aria-label="Website screenshot">
<div class="hfx-image-scroll-page-bar"></div>
<div class="hfx-image-scroll-page-view">
<div class="hfx-image-scroll-page-page">
<div class="hfx-image-scroll-page-hero"></div>
</div>
</div>
</div>CSS
.hfx-image-scroll-page {
--c: var(--hfx-color, #3b82f6);
font-size: var(--hfx-size, 16px);
width: 15em;
border-radius: 0.6em;
overflow: hidden;
background: #fff;
box-shadow: 0 0 0 1px rgb(15 23 42 / 0.12), 0 0.4em 1em -0.3em rgb(15 23 42 / 0.25);
}
.hfx-image-scroll-page-bar {
height: 1.1em;
background:
radial-gradient(circle at 0.65em 50%, #f87171 0.17em, transparent 0.2em),
radial-gradient(circle at 1.2em 50%, #fbbf24 0.17em, transparent 0.2em),
radial-gradient(circle at 1.75em 50%, #34d399 0.17em, transparent 0.2em),
#e5e7eb;
}
.hfx-image-scroll-page-view {
height: 8.4em;
overflow: hidden;
}
.hfx-image-scroll-page-page {
height: 22em;
background:
linear-gradient(#fff 0 0) 1.8em 16.25em / 3em 0.7em,
linear-gradient(#fff 0 0) 1.8em 15.3em / 6.5em 0.45em,
linear-gradient(var(--c) 0 0) 1em 14.6em / 13em 3.2em,
linear-gradient(color-mix(in srgb, var(--c) 30%, #fff) 0 0) 1em 10.4em / 3.9em 1.8em,
linear-gradient(color-mix(in srgb, var(--c) 30%, #fff) 0 0) 5.55em 10.4em / 3.9em 1.8em,
linear-gradient(color-mix(in srgb, var(--c) 30%, #fff) 0 0) 10.1em 10.4em / 3.9em 1.8em,
linear-gradient(#f1f5f9 0 0) 1em 10.4em / 3.9em 3.4em,
linear-gradient(#f1f5f9 0 0) 5.55em 10.4em / 3.9em 3.4em,
linear-gradient(#f1f5f9 0 0) 10.1em 10.4em / 3.9em 3.4em,
linear-gradient(#cbd5e1 0 0) 1em 9.1em / 9em 0.28em,
linear-gradient(#cbd5e1 0 0) 1em 8.5em / 11.5em 0.28em,
linear-gradient(#1f2937 0 0) 1em 7.6em / 5em 0.5em,
linear-gradient(#1f2937 0 0) 0 19.4em / 100% 2.6em,
#fff;
background-repeat: no-repeat;
transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.hfx-image-scroll-page-hero {
height: 6.6em;
background:
linear-gradient(#fff 0 0) 1em 0.7em / 1.4em 0.35em no-repeat,
linear-gradient(rgb(255 255 255 / 0.8) 0 0) 10.4em 0.72em / 3.6em 0.3em no-repeat,
linear-gradient(#fff 0 0) 1em 2.2em / 5.6em 0.6em no-repeat,
linear-gradient(rgb(255 255 255 / 0.8) 0 0) 1em 3.2em / 4.8em 0.3em no-repeat,
linear-gradient(#fff 0 0) 1em 4.1em / 2.8em 0.85em no-repeat,
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-scroll-page:hover .hfx-image-scroll-page-page {
transform: translateY(calc(-100% + 8.4em));
transition: transform 3s cubic-bezier(0.45, 0, 0.55, 1);
}
@media (prefers-reduced-motion: reduce) {
.hfx-image-scroll-page, .hfx-image-scroll-page *, .hfx-image-scroll-page::before, .hfx-image-scroll-page::after, .hfx-image-scroll-page *::before, .hfx-image-scroll-page *::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.