Image Reveal
A picture that unveils itself when it comes into view: a curtain opens from below, from the side or like an iris while the picture settles from a slight zoom.
View codeHover List Preview
Point at a row and its picture shows in one frame that follows the pointer, wiping to the next picture as you move down the list. Panel mode, keyboard and touch thumbnails included.
Image effects
No dependencies
listhoverimageteamportfolioservices
Added Oct 2026
With your AI
Just ask.
Say it to your AI. It gets the exact code below, not its best guess, and knows where it goes.
Add the Kodza Hover List Preview to my page.
Not plugged in yet?
Also in Codex, Cursor and VS Code.
claude mcp add -t http kodza https://kodza.dev/api/mcp
<div class="kodza-hover-list">
<ul class="kodza-hover-list__items" aria-label="Selected work">
<li>
<a class="kodza-hover-list__row" href="#" data-image="https://kodza.dev/media/kz-arch-1400.webp">
<span class="kodza-hover-list__name">The Arch</span>
<span class="kodza-hover-list__detail">Single entry point</span>
<span class="kodza-hover-list__meta">2026</span>
</a>
</li>
<li>
<a class="kodza-hover-list__row" href="#" data-image="https://kodza.dev/media/kz-columns-1400.webp">
<span class="kodza-hover-list__name">Seven Columns</span>
<span class="kodza-hover-list__detail">A grid, no framework</span>
<span class="kodza-hover-list__meta">2025</span>
</a>
</li>
<li>
<a class="kodza-hover-list__row" href="#" data-image="https://kodza.dev/media/kz-float-1400.webp">
<span class="kodza-hover-list__name">Float</span>
<span class="kodza-hover-list__detail">Position: absolute</span>
<span class="kodza-hover-list__meta">2025</span>
</a>
</li>
<li>
<a class="kodza-hover-list__row" href="#" data-image="https://kodza.dev/media/kz-steps-1400.webp">
<span class="kodza-hover-list__name">Stairs to Prod</span>
<span class="kodza-hover-list__detail">Staging, then main</span>
<span class="kodza-hover-list__meta">2024</span>
</a>
</li>
<li>
<a class="kodza-hover-list__row" href="#" data-image="https://kodza.dev/media/kz-stack-1400.webp">
<span class="kodza-hover-list__name">The Stack</span>
<span class="kodza-hover-list__detail">Full stack, literally</span>
<span class="kodza-hover-list__meta">2023</span>
</a>
</li>
</ul>
</div>
<div class="kodza-hover-list kodza-hover-list--panel">
<ul class="kodza-hover-list__items" aria-label="Services">
<li class="kodza-hover-list__group">
<h3>Build <span class="kodza-hover-list__group-count">3</span></h3>
</li>
<li>
<a class="kodza-hover-list__row" href="#" data-image="https://kodza.dev/media/kz-block-1400.webp">
<span class="kodza-hover-list__name">Design systems</span>
<span class="kodza-hover-list__detail">Tokens, not opinions.</span>
</a>
</li>
<li>
<a class="kodza-hover-list__row" href="#" data-image="https://kodza.dev/media/kz-float-1400.webp">
<span class="kodza-hover-list__name">Front-end</span>
<span class="kodza-hover-list__detail">Vanilla. Still delicious.</span>
</a>
</li>
<li>
<a class="kodza-hover-list__row" href="#" data-image="https://kodza.dev/media/kz-arch-1400.webp">
<span class="kodza-hover-list__name">WordPress</span>
<span class="kodza-hover-list__detail">Yes, we still do that.</span>
</a>
</li>
<li class="kodza-hover-list__group">
<h3>Ship <span class="kodza-hover-list__group-count">2</span></h3>
</li>
<li>
<a class="kodza-hover-list__row" href="#" data-image="https://kodza.dev/media/kz-steps-1400.webp">
<span class="kodza-hover-list__name">Motion</span>
<span class="kodza-hover-list__detail">60 fps or it didn't ship.</span>
</a>
</li>
<li>
<a class="kodza-hover-list__row" href="#" data-image="https://kodza.dev/media/kz-columns-1400.webp">
<span class="kodza-hover-list__name">Performance</span>
<span class="kodza-hover-list__detail">Fast on a cheap phone.</span>
</a>
</li>
</ul>
</div>/* Kodza License: free to use, client work included. Not to resell or redistribute, ported or not: https://kodza.dev/docs/#print-license */
/* Kodza — Hover List Preview
A list of rows (work, team, services) where pointing at a row shows its picture in a
single frame. The frame follows the pointer with a little lag and a swing; the row under it
passes in front of the picture, its words on frosted glass where they cross it, and moving
to another row wipes the new picture in from the side you are heading to while the old one
is pushed away. With --panel, the frame sits beside the list and keeps the last picture.
On touch screens and in narrow columns, every row shows its own thumbnail instead.
Group headings (a letter, a year, a department) can sit between the rows.
Keyboard focus works like the pointer. Set data-image on each row.
Everything is tuned with the --kz-hover-list-* variables. */
.kodza-hover-list {
--kz-hover-list-ink: #0a0a0a;
--kz-hover-list-muted: rgba(10, 10, 10, 0.62);
--kz-hover-list-dim: rgba(10, 10, 10, 0.26);
--kz-hover-list-line: rgba(10, 10, 10, 0.12);
--kz-hover-list-placeholder: rgba(10, 10, 10, 0.06);
--kz-hover-list-glass: auto; /* behind the words that cross the picture: auto = the background behind the list, see-through */
--kz-hover-list-size: clamp(22px, 2.6vw, 30px);
--kz-hover-list-columns: minmax(0, 1fr) minmax(0, 13em) auto;
--kz-hover-list-width: 220px; /* the frame that follows the pointer */
--kz-hover-list-panel: 220px; /* the frame beside the list, with --panel */
--kz-hover-list-sticky: 24px; /* with --panel, where the frame stops from the top of the screen */
--kz-hover-list-ratio: 4 / 5;
--kz-hover-list-radius: 12px;
--kz-hover-list-nudge: 12px;
--kz-hover-list-inline: 560px; /* narrower than this, or on touch: a thumbnail in each row */
--kz-hover-list-ease: cubic-bezier(0.22, 1, 0.36, 1);
position: relative;
isolation: isolate;
color: var(--kz-hover-list-ink);
}
.kodza-hover-list--panel {
--kz-hover-list-inline: 720px;
}
.kodza-hover-list__items {
margin: 0;
padding: 0;
border-bottom: 1px solid var(--kz-hover-list-line);
list-style: none;
}
.kodza-hover-list__items > li {
margin: 0;
padding: 0;
}
/* A group heading between the rows: a small label, its count after a dot. The line above it
closes the group before */
.kodza-hover-list__items > .kodza-hover-list__group {
padding: 44px 0 12px;
border-top: 1px solid var(--kz-hover-list-line);
}
.kodza-hover-list__items > .kodza-hover-list__group:first-child {
padding-top: 0;
border-top: 0;
}
.kodza-hover-list__group > * {
display: flex;
align-items: center;
gap: 0.7em;
margin: 0;
color: var(--kz-hover-list-muted);
font-family: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
font-size: 12.5px;
font-weight: 500;
line-height: 1.4;
letter-spacing: 0.02em;
}
.kodza-hover-list__group-count {
display: inline-flex;
align-items: center;
gap: 0.7em;
font-variant-numeric: tabular-nums;
}
.kodza-hover-list__group-count::before {
content: "";
width: 3px;
height: 3px;
border-radius: 50%;
background: currentColor;
}
/* A row: its lines stay under the picture, its words come in front of it when it is current */
.kodza-hover-list__row {
position: relative;
display: grid;
grid-template-columns: var(--kz-hover-list-columns);
align-items: baseline;
column-gap: 24px;
padding: 20px 0;
border-top: 1px solid var(--kz-hover-list-line);
color: var(--kz-hover-list-ink);
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
.kodza-hover-list__name,
.kodza-hover-list__detail,
.kodza-hover-list__meta {
position: relative;
transition: color 0.35s ease, transform 0.55s var(--kz-hover-list-ease);
}
.kodza-hover-list__name {
justify-self: start;
font-size: var(--kz-hover-list-size);
font-weight: 500;
line-height: 1.15;
letter-spacing: -0.035em;
text-wrap: balance;
}
.kodza-hover-list__detail {
justify-self: start;
color: var(--kz-hover-list-muted);
font-size: 15px;
line-height: 1.4;
}
.kodza-hover-list__meta {
justify-self: end;
color: var(--kz-hover-list-muted);
font-family: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
font-size: 13px;
font-variant-numeric: tabular-nums;
text-align: right;
}
.kodza-hover-list__row.is-current .kodza-hover-list__name,
.kodza-hover-list__row.is-current .kodza-hover-list__detail,
.kodza-hover-list__row.is-current .kodza-hover-list__meta {
z-index: 3;
}
/* Where its words cross the picture, they sit on frosted glass: the colour of the background
behind the list (found by the script), so it only shows on the picture */
.kodza-hover-list:not(.kodza-hover-list--panel):not(.is-inline) .kodza-hover-list__row.is-current .kodza-hover-list__name::before,
.kodza-hover-list:not(.kodza-hover-list--panel):not(.is-inline) .kodza-hover-list__row.is-current .kodza-hover-list__detail::before,
.kodza-hover-list:not(.kodza-hover-list--panel):not(.is-inline) .kodza-hover-list__row.is-current .kodza-hover-list__meta::before {
content: "";
position: absolute;
inset: -3px -8px;
z-index: -1;
border-radius: 8px;
background: var(--kz-hover-list-tint, rgba(255, 255, 255, 0.6));
pointer-events: none;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
/* While a row is pointed at, it steps forward and the others step back */
.kodza-hover-list.is-active .kodza-hover-list__row.is-current .kodza-hover-list__name {
transform: translateX(var(--kz-hover-list-nudge));
}
.kodza-hover-list.is-active .kodza-hover-list__row:not(.is-current) .kodza-hover-list__name,
.kodza-hover-list.is-active .kodza-hover-list__row:not(.is-current) .kodza-hover-list__detail,
.kodza-hover-list.is-active .kodza-hover-list__row:not(.is-current) .kodza-hover-list__meta {
color: var(--kz-hover-list-dim);
}
.kodza-hover-list.is-active .kodza-hover-list__row.is-current .kodza-hover-list__detail {
color: var(--kz-hover-list-ink);
}
/* The focus ring is drawn above the picture */
.kodza-hover-list__row:focus-visible {
outline: none;
}
.kodza-hover-list__row:focus-visible::after {
content: "";
position: absolute;
inset: 4px -8px;
z-index: 4;
border-radius: 10px;
box-shadow: 0 0 0 2px var(--kz-hover-list-ink);
pointer-events: none;
}
/* The frame (made by the script): placed in the list's own pixels, cut open from below */
.kodza-hover-list__frame {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: var(--kz-hover-list-width);
pointer-events: none;
will-change: transform;
}
.kodza-hover-list__media {
position: relative;
display: block;
aspect-ratio: var(--kz-hover-list-ratio);
overflow: hidden;
border-radius: var(--kz-hover-list-radius);
outline: 1px solid var(--kz-hover-list-line);
outline-offset: -1px;
background: var(--kz-hover-list-placeholder);
clip-path: inset(100% 0 0 0 round var(--kz-hover-list-radius));
}
.kodza-hover-list__reel,
.kodza-hover-list__slide {
position: absolute;
inset: 0;
display: block;
overflow: hidden;
}
.kodza-hover-list__reel {
transform: scale(1.2);
}
.kodza-hover-list__slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.kodza-hover-list__frame.is-open .kodza-hover-list__media {
clip-path: inset(0 0 0 0 round var(--kz-hover-list-radius));
transition: clip-path 0.6s var(--kz-hover-list-ease);
}
.kodza-hover-list__frame.is-open .kodza-hover-list__reel {
transform: none;
transition: transform 0.9s var(--kz-hover-list-ease);
}
/* It leaves the way it came in: upwards */
.kodza-hover-list__frame.is-leaving .kodza-hover-list__media {
clip-path: inset(0 0 100% 0 round var(--kz-hover-list-radius));
transition: clip-path 0.42s cubic-bezier(0.65, 0, 0.35, 1);
}
.kodza-hover-list__frame.is-leaving .kodza-hover-list__reel {
transform: none;
}
/* --panel: the frame stands beside the list and keeps the last picture */
.kodza-hover-list--panel.is-ready:not(.is-inline) {
display: grid;
grid-template-columns: minmax(0, 1fr) var(--kz-hover-list-panel);
align-items: start;
column-gap: clamp(32px, 5vw, 72px);
}
.kodza-hover-list--panel .kodza-hover-list__frame {
position: sticky;
top: var(--kz-hover-list-sticky);
z-index: auto;
width: auto;
will-change: auto;
}
/* Its number, on a chip of the same glass, rolls the way you go through the list */
.kodza-hover-list__caption {
position: absolute;
bottom: 10px;
left: 10px;
display: flex;
gap: 0.5em;
align-items: center;
height: 24px;
padding: 0 10px;
border-radius: 999px;
background: var(--kz-hover-list-tint, rgba(255, 255, 255, 0.6));
color: var(--kz-hover-list-ink);
font-family: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
font-size: 12px;
line-height: 1;
font-variant-numeric: tabular-nums;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.kodza-hover-list__count {
display: grid;
overflow: hidden;
}
.kodza-hover-list__count > span {
grid-area: 1 / 1;
}
/* Touch screens and narrow columns: no pointer to follow, so a thumbnail in each row */
.kodza-hover-list__thumb {
display: none;
}
.kodza-hover-list.is-inline .kodza-hover-list__frame {
display: none;
}
.kodza-hover-list.is-inline .kodza-hover-list__row {
grid-template-columns: 52px minmax(0, 1fr) auto;
align-items: center;
column-gap: 16px;
row-gap: 2px;
padding: 12px 0;
}
.kodza-hover-list.is-inline .kodza-hover-list__items > .kodza-hover-list__group:not(:first-child) {
padding-top: 32px;
}
.kodza-hover-list.is-inline .kodza-hover-list__thumb {
display: block;
grid-row: 1 / span 2;
aspect-ratio: var(--kz-hover-list-ratio);
overflow: hidden;
border-radius: 8px;
outline: 1px solid var(--kz-hover-list-line);
outline-offset: -1px;
background: var(--kz-hover-list-placeholder);
}
.kodza-hover-list__thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.45s var(--kz-hover-list-ease);
}
.kodza-hover-list.is-inline .kodza-hover-list__row:active .kodza-hover-list__thumb img {
transform: scale(1.08);
}
.kodza-hover-list.is-inline .kodza-hover-list__name {
grid-column: 2;
align-self: end;
font-size: min(var(--kz-hover-list-size), 22px);
}
.kodza-hover-list.is-inline .kodza-hover-list__detail {
grid-column: 2;
align-self: start;
font-size: 14px;
}
.kodza-hover-list.is-inline .kodza-hover-list__meta {
grid-column: 3;
grid-row: 1 / span 2;
}
@media (prefers-reduced-motion: reduce) {
.kodza-hover-list__name,
.kodza-hover-list__detail,
.kodza-hover-list__meta,
.kodza-hover-list__media,
.kodza-hover-list__reel,
.kodza-hover-list__thumb img {
transition-duration: 0.01ms !important;
}
}
/* Theming example — on a dark background:
.dark-section .kodza-hover-list {
--kz-hover-list-ink: #f2f2f0;
--kz-hover-list-muted: rgba(242, 242, 240, 0.62);
--kz-hover-list-dim: rgba(242, 242, 240, 0.26);
--kz-hover-list-line: rgba(255, 255, 255, 0.12);
--kz-hover-list-placeholder: rgba(255, 255, 255, 0.06);
}
*/
/* kodza-guard 9dbd8e2c096f — generated by Kodza, do not edit.
Theme guard: keeps a site's own CSS (WordPress themes, Bootstrap, CSS resets…) off this
component. :not(#_) is always true and weighs as much as an id, so these lines win over
theme rules made of classes and tags. Customise the component through its --kz-* variables. */
/* What the browser gives, where the component sets it only in some states: at the lowest weight, so its own rules below put it back */
:where(.kodza-hover-list__row):not(#_) {
outline: revert;
}
/* What the browser gives, on everything the component leaves to it */
.kodza-hover-list:not(#_),
.kodza-hover-list__thumb:not(#_),
.kodza-hover-list__name:not(#_),
.kodza-hover-list__detail:not(#_),
.kodza-hover-list__meta:not(#_),
.kodza-hover-list__frame:not(#_),
.kodza-hover-list__media:not(#_),
.kodza-hover-list__reel:not(#_),
.kodza-hover-list__group-count:not(#_),
.kodza-hover-list__slide:not(#_),
.kodza-hover-list__caption:not(#_),
.kodza-hover-list__count:not(#_),
.kodza-hover-list__total:not(#_),
.kodza-hover-list__count span:where(:not([class*="kodza-"])):not(#_) {
box-sizing: revert;
}
.kodza-hover-list__items:not(#_) {
border-radius: revert;
outline: revert;
text-decoration: revert;
transition: revert;
box-sizing: revert;
float: revert;
position: revert;
border-top-width: revert;
border-right-width: revert;
border-left-width: revert;
border-top-style: revert;
border-right-style: revert;
border-left-style: revert;
border-top-color: revert;
border-right-color: revert;
border-left-color: revert;
background-color: revert;
background-image: revert;
box-shadow: revert;
outline-offset: revert;
appearance: revert;
max-width: revert;
max-height: revert;
color: revert;
font-family: revert;
font-size: revert;
font-weight: revert;
font-style: revert;
line-height: revert;
letter-spacing: revert;
text-transform: revert;
text-underline-offset: revert;
text-align: revert;
text-indent: revert;
text-shadow: revert;
vertical-align: revert;
}
.kodza-hover-list__row:not(#_) {
margin: revert;
border-radius: revert;
transition: revert;
list-style: revert;
box-sizing: revert;
float: revert;
border-right-width: revert;
border-bottom-width: revert;
border-left-width: revert;
border-right-style: revert;
border-bottom-style: revert;
border-left-style: revert;
border-right-color: revert;
border-bottom-color: revert;
border-left-color: revert;
background-color: revert;
background-image: revert;
box-shadow: revert;
outline-offset: revert;
appearance: revert;
max-width: revert;
max-height: revert;
font-family: revert;
font-size: revert;
font-weight: revert;
font-style: revert;
line-height: revert;
letter-spacing: revert;
text-transform: revert;
text-underline-offset: revert;
text-align: revert;
text-indent: revert;
text-shadow: revert;
vertical-align: revert;
}
.kodza-hover-list__group:not(#_) {
border-radius: revert;
outline: revert;
text-decoration: revert;
transition: revert;
list-style: revert;
box-sizing: revert;
float: revert;
position: revert;
border-right-width: revert;
border-bottom-width: revert;
border-left-width: revert;
border-right-style: revert;
border-bottom-style: revert;
border-left-style: revert;
border-right-color: revert;
border-bottom-color: revert;
border-left-color: revert;
background-color: revert;
background-image: revert;
box-shadow: revert;
outline-offset: revert;
appearance: revert;
max-width: revert;
max-height: revert;
color: revert;
font-family: revert;
font-size: revert;
font-weight: revert;
font-style: revert;
line-height: revert;
letter-spacing: revert;
text-transform: revert;
text-underline-offset: revert;
text-align: revert;
text-indent: revert;
text-shadow: revert;
vertical-align: revert;
}
.kodza-hover-list__items li:where(:not([class*="kodza-"]):not(.kodza-hover-list__items [class*="kodza-"] *)):not(#_) {
border: revert;
border-radius: revert;
outline: revert;
text-decoration: revert;
transition: revert;
list-style: revert;
box-sizing: revert;
float: revert;
position: revert;
background-color: revert;
background-image: revert;
box-shadow: revert;
outline-offset: revert;
appearance: revert;
max-width: revert;
max-height: revert;
color: revert;
font-family: revert;
font-size: revert;
font-weight: revert;
font-style: revert;
line-height: revert;
letter-spacing: revert;
text-transform: revert;
text-underline-offset: revert;
text-align: revert;
text-indent: revert;
text-shadow: revert;
vertical-align: revert;
}
.kodza-hover-list__thumb img:where(:not([class*="kodza-"])):not(#_) {
border: revert;
margin: revert;
padding: revert;
border-radius: revert;
outline: revert;
text-decoration: revert;
list-style: revert;
box-sizing: revert;
float: revert;
position: revert;
background-color: revert;
background-image: revert;
box-shadow: revert;
outline-offset: revert;
appearance: revert;
max-width: revert;
max-height: revert;
color: revert;
font-family: revert;
font-size: revert;
font-weight: revert;
font-style: revert;
line-height: revert;
letter-spacing: revert;
text-transform: revert;
text-underline-offset: revert;
text-align: revert;
text-indent: revert;
text-shadow: revert;
vertical-align: revert;
}
.kodza-hover-list__group h3:where(:not([class*="kodza-"]):not(.kodza-hover-list__group [class*="kodza-"] *)):not(#_) {
border: revert;
padding: revert;
border-radius: revert;
outline: revert;
text-decoration: revert;
transition: revert;
list-style: revert;
box-sizing: revert;
float: revert;
position: revert;
background-color: revert;
background-image: revert;
box-shadow: revert;
outline-offset: revert;
appearance: revert;
max-width: revert;
max-height: revert;
font-style: revert;
text-transform: revert;
text-underline-offset: revert;
text-align: revert;
text-indent: revert;
text-shadow: revert;
vertical-align: revert;
}
.kodza-hover-list__slide img:where(:not([class*="kodza-"])):not(#_) {
border: revert;
margin: revert;
padding: revert;
border-radius: revert;
outline: revert;
text-decoration: revert;
transition: revert;
list-style: revert;
box-sizing: revert;
float: revert;
position: revert;
background-color: revert;
background-image: revert;
box-shadow: revert;
outline-offset: revert;
appearance: revert;
max-width: revert;
max-height: revert;
color: revert;
font-family: revert;
font-size: revert;
font-weight: revert;
font-style: revert;
line-height: revert;
letter-spacing: revert;
text-transform: revert;
text-underline-offset: revert;
text-align: revert;
text-indent: revert;
text-shadow: revert;
vertical-align: revert;
}
.kodza-hover-list__items:not(#_):where(:not([hidden])),
.kodza-hover-list__group:not(#_):where(:not([hidden])),
.kodza-hover-list__items li:where(:not([class*="kodza-"]):not(.kodza-hover-list__items [class*="kodza-"] *)):not(#_):where(:not([hidden])) {
display: revert;
}
.kodza-hover-list__items:not(#_):where([hidden]),
.kodza-hover-list__group:not(#_):where([hidden]),
.kodza-hover-list__items li:where(:not([class*="kodza-"]):not(.kodza-hover-list__items [class*="kodza-"] *)):not(#_):where([hidden]) {
display: none;
}
.kodza-hover-list__group-count:not(#_)::before,
.kodza-hover-list__name:not(#_)::before,
.kodza-hover-list__detail:not(#_)::before,
.kodza-hover-list__meta:not(#_)::before,
.kodza-hover-list__row:not(#_)::after {
box-sizing: revert;
}
/* The component's own rules, one step stronger: real buttons and fields, what it sets on tags themes style (links, lists, headings, images…), and the root width (a theme may narrow it, never widen it) */
.kodza-hover-list__items:not(#_) {
margin: 0;
padding: 0;
border-bottom: 1px solid var(--kz-hover-list-line);
list-style: none;
}
.kodza-hover-list__items > li:not(#_) {
margin: 0;
padding: 0;
}
.kodza-hover-list__items > .kodza-hover-list__group:not(#_) {
padding: 44px 0 12px;
border-top: 1px solid var(--kz-hover-list-line);
}
.kodza-hover-list__items > .kodza-hover-list__group:first-child:not(#_) {
padding-top: 0;
border-top: 0;
}
.kodza-hover-list__group > *:not(#_) {
display: flex;
margin: 0;
color: var(--kz-hover-list-muted);
font-family: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
font-size: 12.5px;
font-weight: 500;
line-height: 1.4;
letter-spacing: 0.02em;
}
.kodza-hover-list__row:not(#_) {
position: relative;
display: grid;
padding: 20px 0;
border-top: 1px solid var(--kz-hover-list-line);
color: var(--kz-hover-list-ink);
text-decoration: none;
}
.kodza-hover-list__row:focus-visible:not(#_) {
outline: none;
}
.kodza-hover-list__slide img:not(#_) {
display: block;
}
.kodza-hover-list.is-inline .kodza-hover-list__row:not(#_) {
padding: 12px 0;
}
.kodza-hover-list.is-inline .kodza-hover-list__items > .kodza-hover-list__group:not(:first-child):not(#_) {
padding-top: 32px;
}
.kodza-hover-list__thumb img:not(#_) {
display: block;
transition: transform 0.45s var(--kz-hover-list-ease);
}
@media (prefers-reduced-motion: reduce) {
.kodza-hover-list__thumb img:not(#_) {
transition-duration: 0.01ms !important;
}
}// Kodza License: free to use, client work included. Not to resell or redistribute, ported or not: https://kodza.dev/docs/#print-license
// Kodza — Hover List Preview
// One frame per list. It opens on the row under the pointer (or the keyboard focus) once its
// picture is ready, follows the pointer with a little lag and a swing, and swaps pictures with
// a wipe from the side you are heading to (the current row's words sit on frosted glass where
// they cross it). --panel: the frame stays beside the list and
// keeps the last picture. On touch screens and in narrow columns it steps aside: every row
// shows its own thumbnail. Positions are measured in the list's own pixels, so a scaled parent
// does not shift them. Group headings can sit between the rows (a letter, a year): the frame
// ignores them. Pictures are fetched row by row as they come near the screen, so a long list
// never loads what nobody scrolls to.
(() => {
const SELECTOR = '.kodza-hover-list';
const ROW = '.kodza-hover-list__row';
const GROUP = '.kodza-hover-list__group';
const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const canHover = window.matchMedia('(hover: hover) and (pointer: fine)');
const ease = 'cubic-bezier(0.22, 1, 0.36, 1)';
const wipe = { duration: 700, easing: 'cubic-bezier(0.33, 1, 0.68, 1)' };
const FOLLOW = 0.16; // how much of the way the frame catches up each frame
const SWING = 0.07; // degrees of tilt per pixel it lags behind
const clamp = (v, min, max) => Math.min(max, Math.max(min, v));
// Where an element is right now, even mid-animation, to start its next move from there
const now = (el) => getComputedStyle(el).transform;
const pad = (n) => String(n).padStart(2, '0');
const make = (tag, className) => Object.assign(document.createElement(tag), { className });
const ready = (img) => (img.complete ? Promise.resolve() : img.decode().catch(() => {}));
// Old text up, new text from below (or the other way round when going up the list)
const roll = (el, text, dir) => {
const old = el.lastElementChild;
if (old?.textContent === text) return;
const next = Object.assign(document.createElement('span'), { textContent: text });
el.append(next);
if (!old) return;
if (!dir || reduceMotion) return [...el.children].slice(0, -1).forEach((child) => child.remove());
const timing = { duration: 520, easing: ease };
const from = now(old);
old.getAnimations().forEach((a) => a.cancel());
old.animate([{ transform: from }, { transform: `translateY(${-110 * dir}%)` }], { ...timing, fill: 'forwards' })
.finished.then(() => old.remove(), () => {});
next.animate([{ transform: `translateY(${110 * dir}%)` }, { transform: 'none' }], timing);
};
// One instance. Everything it starts is tied to `signal`, so kodza:destroy stops it all
function mount(root, signal) {
const rows = [...root.querySelectorAll(ROW)].filter((row) => row.dataset.image);
if (!rows.length) return;
const panel = root.classList.contains('kodza-hover-list--panel');
// A thumbnail in each row, shown on touch screens and in narrow columns (and only then loaded)
rows.forEach((row) => {
const thumb = make('span', 'kodza-hover-list__thumb');
thumb.setAttribute('aria-hidden', 'true');
// loading before src: set the other way round, every thumbnail would be fetched at once
thumb.append(Object.assign(document.createElement('img'), { loading: 'lazy', decoding: 'async', alt: '', src: row.dataset.image }));
row.prepend(thumb);
});
// The frame, one per list
const frame = make('span', 'kodza-hover-list__frame');
frame.setAttribute('aria-hidden', 'true');
const media = make('span', 'kodza-hover-list__media');
const reel = make('span', 'kodza-hover-list__reel');
media.append(reel);
frame.append(media);
let count = null;
if (panel) {
const caption = make('span', 'kodza-hover-list__caption');
count = make('span', 'kodza-hover-list__count');
caption.append(count, Object.assign(make('span', 'kodza-hover-list__total'), { textContent: `/ ${pad(rows.length)}` }));
media.append(caption);
}
root.append(frame);
let current = null; // the row pointed at
let shown = -1; // the row whose picture is in the frame
let open = false; // wanted open
let visible = false; // on screen: open, or still closing
let inline = false;
let pointer = null; // the last pointer position, while the pointer drives the frame
let shut = 0;
let raf = 0;
let last = 0;
let x = 0;
let y = 0;
let tx = 0;
let ty = 0;
let tilt = 0;
// The glass behind the words: the colour you set, or (auto) the background behind the list
const tint = () => {
let glass = getComputedStyle(root).getPropertyValue('--kz-hover-list-glass').trim();
if (!glass || glass === 'auto') {
let color = '#ffffff';
for (let el = root; el; el = el.parentElement) {
const bg = getComputedStyle(el).backgroundColor;
if (bg && bg !== 'transparent' && !/^rgba\(.*,\s*0\)$/.test(bg)) {
color = bg;
break;
}
}
glass = `color-mix(in srgb, ${color} 60%, transparent)`;
}
root.style.setProperty('--kz-hover-list-tint', glass);
};
// Each picture is fetched as its row comes near the screen, so the next one is ready when
// the pointer gets there (thumbnails load on their own, lazily)
const warmed = new WeakSet();
const warm = new IntersectionObserver((entries) => {
if (inline) return;
entries.forEach((entry) => {
if (!entry.isIntersecting) return;
warm.unobserve(entry.target);
warmed.add(entry.target);
new Image().src = entry.target.dataset.image;
});
}, { rootMargin: '300px 0px' });
// Observing again reports where each row is now: back from thumbnails, the nearby rows load
const watch = () => rows.forEach((row) => {
if (warmed.has(row)) return;
warm.unobserve(row);
warm.observe(row);
});
// A new picture on top, wiped in from the side we are heading to; the old one is pushed away
const swap = (index, dir) => {
const slide = make('span', 'kodza-hover-list__slide');
const img = Object.assign(document.createElement('img'), { src: rows[index].dataset.image, alt: '', decoding: 'async' });
slide.append(img);
const below = [...reel.children];
reel.append(slide);
shown = index;
if (count) roll(count, pad(index + 1), dir);
const clear = () => below.forEach((el) => el.remove());
// Out of sight (the frame opens around it), or no motion wanted: no wipe
if (reduceMotion || (!dir && (img.complete || !visible))) return clear();
const side = dir || 1;
const hidden = side > 0 ? 'inset(100% 0 0 0)' : 'inset(0 0 100% 0)';
slide.style.clipPath = hidden;
// Never wipe in a picture that is not there yet
ready(img).then(() => {
if (signal.aborted || !slide.isConnected) return;
slide.style.clipPath = '';
slide.animate([{ clipPath: hidden }, { clipPath: 'inset(0 0 0 0)' }], wipe).finished.then(clear, () => {});
img.animate([{ transform: `translateY(${28 * side}%) scale(1.12)` }, { transform: 'none' }], wipe);
below.forEach((el) => {
const pic = el.firstElementChild;
const from = now(pic);
pic.getAnimations().forEach((a) => a.cancel());
pic.animate([{ transform: from }, { transform: `translateY(${-18 * side}%)` }], { ...wipe, fill: 'forwards' });
});
});
};
// Measured in the list's own pixels: a parent scaled by a transform does not shift anything
const measure = () => {
const box = root.getBoundingClientRect();
return { box, k: box.width / root.offsetWidth || 1 };
};
// The frame's corner, centred on a point and kept inside the list
const aim = (cx, cy) => {
const w = frame.offsetWidth;
const h = frame.offsetHeight;
const W = root.offsetWidth;
const H = root.offsetHeight;
tx = clamp(cx - w / 2, 0, Math.max(0, W - w));
ty = H > h ? clamp(cy - h / 2, 0, H - h) : (H - h) / 2;
};
const aimAtPointer = ({ clientX, clientY }) => {
const { box, k } = measure();
aim((clientX - box.left) / k, (clientY - box.top) / k);
};
// From the keyboard: on the row, towards its right
const aimAtRow = (row) => {
const { box, k } = measure();
const r = row.getBoundingClientRect();
aim(root.offsetWidth * 0.62, (r.top + r.height / 2 - box.top) / k);
};
const paint = () => {
frame.style.transform = `translate3d(${x.toFixed(2)}px, ${y.toFixed(2)}px, 0) rotate(${tilt.toFixed(2)}deg)`;
};
const glide = (time) => {
if (signal.aborted) return;
const dt = last ? Math.min(64, time - last) : 16.7;
last = time;
const f = reduceMotion ? 1 : 1 - (1 - FOLLOW) ** (dt / 16.7);
x += (tx - x) * f;
y += (ty - y) * f;
// A slight swing, from how far it lags behind
tilt += ((reduceMotion ? 0 : clamp((tx - x) * SWING, -7, 7)) - tilt) * f;
const moving = Math.abs(tx - x) + Math.abs(ty - y) + Math.abs(tilt) > 0.2;
if (!moving) {
x = tx;
y = ty;
tilt = 0;
last = 0;
}
paint();
raf = moving ? requestAnimationFrame(glide) : 0;
};
const kick = () => {
if (!raf) raf = requestAnimationFrame(glide);
};
// Open once its picture is ready: never an empty frame
const reveal = () => {
if (signal.aborted || !open || visible) return;
visible = true;
frame.classList.remove('is-leaving');
frame.classList.add('is-open');
};
const show = (row, at) => {
clearTimeout(shut);
if (!root.classList.contains('is-active')) tint();
pointer = at || null;
const index = rows.indexOf(row);
if (row !== current) {
current?.classList.remove('is-current');
row.classList.add('is-current');
current = row;
}
root.classList.add('is-active');
if (index !== shown) swap(index, visible ? Math.sign(index - shown) : 0);
if (panel) return;
if (at) aimAtPointer(at);
else aimAtRow(row);
// Opening: right where it is wanted, no slide from where it last was
if (!visible) {
x = tx;
y = ty;
tilt = 0;
paint();
}
kick();
if (open) return;
open = true;
if (visible) {
// Caught while closing: it simply opens again from there
frame.classList.remove('is-leaving');
frame.classList.add('is-open');
} else ready(reel.lastElementChild.firstElementChild).then(reveal);
};
const hide = () => {
clearTimeout(shut);
pointer = null;
root.classList.remove('is-active');
if (panel) return;
current?.classList.remove('is-current');
current = null;
if (!open) return;
open = false;
if (!visible) return;
frame.classList.remove('is-open');
frame.classList.add('is-leaving');
};
const hideSoon = () => {
clearTimeout(shut);
shut = setTimeout(hide, 120);
};
media.addEventListener('transitionend', (event) => {
if (event.target !== media || open) return;
frame.classList.remove('is-leaving');
visible = false;
}, { signal });
// Thumbnails or frame: no frame without a pointer to follow, or without the room for it
const layout = () => {
const limit = parseFloat(getComputedStyle(root).getPropertyValue('--kz-hover-list-inline')) || 0;
const next = !canHover.matches || root.offsetWidth < limit;
if (next === inline) return;
inline = next;
root.classList.toggle('is-inline', inline);
if (!inline) watch();
if (!inline || panel) return;
// The frame goes away at once, ready to open again from scratch
hide();
frame.classList.remove('is-leaving');
visible = false;
};
layout();
tint();
const resize = new ResizeObserver(layout);
resize.observe(root);
canHover.addEventListener('change', layout, { signal });
// --panel: open from the start, on the first row
if (panel) {
open = true;
visible = true;
frame.classList.add('is-open');
rows[0].classList.add('is-current');
current = rows[0];
swap(0, 0);
}
watch();
root.addEventListener('pointermove', (event) => {
if (inline || event.pointerType === 'touch') return;
// Crossing a group heading: the frame stays on the row it shows
if (event.target.closest(GROUP)) return;
const row = event.target.closest(ROW);
if (row && rows.includes(row)) show(row, event);
else if (root.classList.contains('is-active')) hideSoon();
}, { signal });
root.addEventListener('pointerleave', (event) => {
if (event.pointerType !== 'touch') hide();
}, { signal });
// Scrolling moves the list under a still pointer: follow what is under it now
document.addEventListener('scroll', () => {
if (!pointer || panel) return;
const { clientX, clientY } = pointer;
const under = document.elementFromPoint(clientX, clientY);
if (under?.closest(GROUP) && root.contains(under)) return;
const row = under?.closest(ROW);
if (row && rows.includes(row)) show(row, { clientX, clientY });
else hide();
}, { signal, capture: true, passive: true });
root.addEventListener('focusin', (event) => {
const row = event.target.closest(ROW);
if (!inline && row && rows.includes(row) && row.matches(':focus-visible')) show(row);
}, { signal });
root.addEventListener('focusout', (event) => {
if (!root.contains(event.relatedTarget)) hide();
}, { signal });
root.addEventListener('keydown', (event) => {
if (event.key === 'Escape' && root.classList.contains('is-active')) hide();
}, { signal });
signal.addEventListener('abort', () => {
resize.disconnect();
warm.disconnect();
cancelAnimationFrame(raf);
clearTimeout(shut);
});
}
// Kodza lifecycle, the same in every component: `kodza:init` starts the instances inside
// event.detail.root (the whole page by default), `kodza:destroy` stops them and puts their
// markup back. For themes and apps that swap content without a page load.
const instances = new WeakMap();
const find = (scope = document) => [scope, ...scope.querySelectorAll(SELECTOR)].filter((el) => el.matches?.(SELECTOR));
const init = (scope) => find(scope).forEach((root) => {
if (root.classList.contains('is-ready')) return; // already running, maybe from another copy of this script
const controller = new AbortController();
instances.set(root, { controller, html: root.innerHTML, attrs: [...root.attributes].map((a) => [a.name, a.value]) });
mount(root, controller.signal);
root.classList.add('is-ready');
});
const destroy = (scope) => find(scope).forEach((root) => {
const instance = instances.get(root);
if (!instance) return;
instances.delete(root);
instance.controller.abort();
[...root.attributes].forEach((a) => root.removeAttribute(a.name));
instance.attrs.forEach(([name, value]) => root.setAttribute(name, value));
root.innerHTML = instance.html;
});
document.addEventListener('kodza:init', (event) => init(event.detail?.root));
document.addEventListener('kodza:destroy', (event) => destroy(event.detail?.root));
init();
// Loaded in <head>, the script runs before the markup exists: once more when it is parsed
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', () => init(), { once: true });
})();'use client';
// Kodza — Hover List Preview, for React. From https://kodza.dev/components/hover-list-preview/
// Kodza License: free to use, client work included. Not to resell or redistribute, ported or not: https://kodza.dev/docs/#print-license
// Next to this file: hover-list-preview.css and hover-list-preview.js, the component's CSS and JS from Kodza, as they are.
// Yours to edit: the markup is plain JSX below.
// The script changes this markup once React has rendered it (it adds layers, splits text, moves
// nodes), so React must not patch it afterwards. When a prop changes, the key gives React a fresh
// element: kodza:destroy stops the script on the old one, kodza:init starts it on the new one.
import { useRef, useEffect, type ComponentPropsWithoutRef, type ComponentRef, type CSSProperties } from 'react';
import './hover-list-preview.css';
type Variant = "panel";
export type HoverListPreviewProps = Omit<ComponentPropsWithoutRef<'div'>, "children" | "variant" | "vars"> & {
/** Modifier class(es): .kodza-hover-list--panel */
variant?: Variant | Variant[];
/** Settings, as CSS variables on the root */
vars?: {
/** default: #0a0a0a */
"--kz-hover-list-ink"?: string | number;
/** default: rgba(10, 10, 10, 0.62) */
"--kz-hover-list-muted"?: string | number;
/** default: rgba(10, 10, 10, 0.26) */
"--kz-hover-list-dim"?: string | number;
/** default: rgba(10, 10, 10, 0.12) */
"--kz-hover-list-line"?: string | number;
/** default: rgba(10, 10, 10, 0.06) */
"--kz-hover-list-placeholder"?: string | number;
/** behind the words that cross the picture: auto = the background behind the list, see-through — default: auto */
"--kz-hover-list-glass"?: string | number;
/** default: clamp(22px, 2.6vw, 30px) */
"--kz-hover-list-size"?: string | number;
/** default: minmax(0, 1fr) minmax(0, 13em) auto */
"--kz-hover-list-columns"?: string | number;
/** the frame that follows the pointer — default: 220px */
"--kz-hover-list-width"?: string | number;
/** the frame beside the list, with --panel — default: 220px */
"--kz-hover-list-panel"?: string | number;
/** with --panel, where the frame stops from the top of the screen — default: 24px */
"--kz-hover-list-sticky"?: string | number;
/** default: 4 / 5 */
"--kz-hover-list-ratio"?: string | number;
/** default: 12px */
"--kz-hover-list-radius"?: string | number;
/** default: 12px */
"--kz-hover-list-nudge"?: string | number;
/** narrower than this, or on touch: a thumbnail in each row — default: 560px */
"--kz-hover-list-inline"?: string | number;
/** default: cubic-bezier(0.22, 1, 0.36, 1) */
"--kz-hover-list-ease"?: string | number;
};
className?: string;
};
export function HoverListPreview({ variant, vars, className, style, ...rest }: HoverListPreviewProps) {
const ref = useRef<ComponentRef<'div'>>(null);
const classes = ["kodza-hover-list", ...([] as string[]).concat(variant ?? []).map((v) => `kodza-hover-list--${v}`), className].filter(Boolean).join(' ');
// Everything the markup is made of: when it changes, React gets a fresh element (see the top)
const key = JSON.stringify([classes, vars, style, rest]);
// Starts the script on this element once React has rendered it, stops it when it goes
useEffect(() => {
const root = ref.current;
let live = true;
// @ts-ignore: a plain script, no types to find
import('./hover-list-preview.js').then(() => {
if (live) document.dispatchEvent(new CustomEvent('kodza:init', { detail: { root } }));
});
return () => {
live = false;
document.dispatchEvent(new CustomEvent('kodza:destroy', { detail: { root } }));
};
}, [key]);
return (
<div key={key} {...rest} className={classes} style={{ ...vars, ...style } as CSSProperties} ref={ref}>
<ul className="kodza-hover-list__items" aria-label="Selected work">
<li>
<a className="kodza-hover-list__row" href="#" data-image="https://kodza.dev/media/kz-arch-1400.webp">
<span className="kodza-hover-list__name">The Arch</span>
{' '}
<span className="kodza-hover-list__detail">Single entry point</span>
{' '}
<span className="kodza-hover-list__meta">2026</span>
</a>
</li>
<li>
<a className="kodza-hover-list__row" href="#" data-image="https://kodza.dev/media/kz-columns-1400.webp">
<span className="kodza-hover-list__name">Seven Columns</span>
{' '}
<span className="kodza-hover-list__detail">A grid, no framework</span>
{' '}
<span className="kodza-hover-list__meta">2025</span>
</a>
</li>
<li>
<a className="kodza-hover-list__row" href="#" data-image="https://kodza.dev/media/kz-float-1400.webp">
<span className="kodza-hover-list__name">Float</span>
{' '}
<span className="kodza-hover-list__detail">Position: absolute</span>
{' '}
<span className="kodza-hover-list__meta">2025</span>
</a>
</li>
<li>
<a className="kodza-hover-list__row" href="#" data-image="https://kodza.dev/media/kz-steps-1400.webp">
<span className="kodza-hover-list__name">Stairs to Prod</span>
{' '}
<span className="kodza-hover-list__detail">Staging, then main</span>
{' '}
<span className="kodza-hover-list__meta">2024</span>
</a>
</li>
<li>
<a className="kodza-hover-list__row" href="#" data-image="https://kodza.dev/media/kz-stack-1400.webp">
<span className="kodza-hover-list__name">The Stack</span>
{' '}
<span className="kodza-hover-list__detail">Full stack, literally</span>
{' '}
<span className="kodza-hover-list__meta">2023</span>
</a>
</li>
</ul>
</div>
);
}Checked
Checked before you paste.
Robots poked at it before you did. Every component goes through the same checks, and again each time it changes.
What ranLast run
Accessibilityaxe-core 4.10.2: the WCAG 2.1 A and AA rules, plus best practices.
0 issues
KeyboardThe Tab key gets there, and the focus ring shows when it does.
Passed
Reduced motionTurn on reduced motion and what moved just appears. Nothing loops.
Passed
Light and darkThe same checks on both themes, contrast included.
Passed
WordPressPasted into Twenty Twenty-Five, Twenty Twenty-One, Astra, Blocksy, GeneratePress, Hello Elementor, Kadence and OceanWP. Nothing to flag.
8 / 8 themes
Robots checked this. A human with VoiceOver hasn't yet.
KeyboardPress them in the preview
On a row
- Moves between rows, the picture follows the focusTab/⇧Tab
On a row, while its picture shows
- Hides the picture, focus stays on the rowEsc
Image Hover
Four ways for an image to answer the pointer, inside its own frame: a slow zoom, coming into focus, rounding off, or drifting with the cursor.
View code
Card
An editorial card, clickable as a whole through one link: the image drifts closer, the border firms up and an arrow slides in.
View code
Custom Cursor
Inside its zone the pointer becomes a dot with a soft lag, and a pill that says what a click will do over each item. No GSAP.
View code
Hero Expand
A big title with a small picture set between two words. On scroll the scene pins, the picture opens to full screen and pushes the words aside, then a caption and a button rise. Scroll back up: it rewinds.
View code
Page Lift
Between two real pages, the one you leave recedes as the next rises over it on a rounded edge. The header stays, back plays it in reverse. Chrome, Edge, Safari; Firefox loads plainly for now. No GSAP.
View code