{"id":8684,"date":"2026-02-26T09:08:10","date_gmt":"2026-02-26T14:08:10","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=8684"},"modified":"2026-02-27T08:58:52","modified_gmt":"2026-02-27T13:58:52","slug":"nav-thumbnail-flip-image","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/nav-thumbnail-flip-image\/","title":{"rendered":"Lessons Learned from Failed Demos: Pure CSS Nav Thumb Flip on Scroll"},"content":{"rendered":"\n

A recent CodePen Spark<\/a> led me to discover this cool-looking demo<\/a>. It’s an interesting effect, but it uses too much JavaScript for my taste, so I thought I could give it a CSS treatment. Plus, I felt the flip would look better if it were “hinged” to the top\/bottom edge, depending on the direction in which we’re going.<\/p>\n\n\n\n

About half an hour later, I had this:<\/p>\n\n\n

\n
\"Animated
recording of my result<\/figcaption><\/figure>\n<\/div>\n\n\n

Let’s see how I did it… and what went wrong.<\/p>\n\n\n\n

The Layout Basics<\/h2>\n\n\n\n

We have a <nav><\/code> element with n<\/code> children. Since we’ll be needing this number n<\/code> to make styling choices, we pass it to the CSS as a custom property. The same goes for the index i<\/code> of each nav<\/code> item. To make it easier for myself, I used Pug to generate the HTML from a data object – the result looks as follows:<\/p>\n\n\n

<nav<\/span> style<\/span>=\"--n: 7\"<\/span>><\/span>\n  <a<\/span> href<\/span>=\"#\"<\/span> style<\/span>=\"--i: 0\"<\/span>><\/span>\n    tiger\n    <img<\/span> src<\/span>=\"tiger.jpg\"<\/span> alt<\/span>=\"tiger drinking water\"<\/span> \/><\/span>\n  <\/a<\/span>><\/span>\n  <a<\/span> href<\/span>=\"#\"<\/span> style<\/span>=\"--i: 1\"<\/span>><\/span>\n    lion\n    <img<\/span> src<\/span>=\"lion.jpg\"<\/span> alt<\/span>=\"lion couple on a rock\"<\/span> \/><\/span>\n  <\/a<\/span>><\/span>\n  <!-- the other cats --><\/span>\n<\/nav<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
It’s a pretty simple structure, just a nav<\/code> wrapper around a<\/code> items, each of these items containing text and an img<\/code> child.<\/p>\n\n\n\n
Moving on to the CSS, our nav is using fixed positioning and made to cover all available viewport space (note that this excludes any scrollbars we might have).<\/p>\n\n\n
nav<\/span> {\n  position<\/span>: fixed;\n  inset<\/span>: 0<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
nav<\/span> {\n<\/span><\/span>  display<\/span>: grid;\n<\/span><\/mark>  grid-template-columns<\/span>: min<\/span>(100%<\/span> - 1em<\/span>, 25em<\/span>);\n<\/span><\/mark>  place-content<\/span>: center;\n<\/span><\/mark>  position<\/span>: fixed;\n<\/span><\/span>  inset<\/span>: 0<\/span>;\n<\/span><\/span>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Note that we use 100% - 1em<\/code> inside the min()<\/code> to keep a little bit of space on the lateral sides of the grid to prevent it from kissing the viewport edges without adding a separate padding<\/code> rule. Because why waste precious screen space on a non-essential declaration when we could find more important CSS to cram in there?<\/p>\n\n\n
\n
\"Screenshot.
doesn’t look like much yet<\/figcaption><\/figure>\n<\/div>\n\n\n
We’re done with the important styles on the nav<\/code>, so we move on to prettifying touches. We slap on a subtle background and give it a viewport-relative font<\/code>, kept within reasonable limits by a clamp()<\/code> – we don’t want the text to get so small it’s unreadable, nor do we want it to balloon on huge screens.<\/p>\n\n\n
\n
\"Screenshot.
well, that makes a bit of a difference<\/figcaption><\/figure>\n<\/div>\n\n\n
With the nav<\/code> styles settled, we turn our attention to the links, for which we use a flex<\/code> layout. This allows us to middle-align the text content and the img<\/code> vertically and push them to opposite ends horizontally:<\/p>\n\n\n
nav<\/span> a<\/span> {\n  display<\/span>: flex;\n  align-items<\/span>: center;\n  justify-content<\/span>: space-between;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n
\n
\"Screenshot.Shows
starting to look like something<\/figcaption><\/figure>\n<\/div>\n\n\n
Each link receives a thin border-bottom<\/code> to create the separator line and a lateral padding. These are set as custom properties, which may not make much sense right now, but I promise it’s for a good reason.<\/p>\n\n\n
nav<\/span> a<\/span> {\n<\/span><\/span>  --pad<\/span>: min<\/span>(2em<\/span>, 4vw<\/span>);\n<\/span><\/mark>  --l<\/span>: 1px<\/span>;\n<\/span><\/mark>\t\n<\/span><\/span>  display<\/span>: flex;\n<\/span><\/span>  align-items<\/span>: center;\n<\/span><\/span>  justify-content<\/span>: space-between;\n<\/span><\/span>  border-bottom<\/span>: solid var<\/span>(--l) #000<\/span>;\n<\/span><\/mark>  padding<\/span>: 0<\/span> var<\/span>(--pad);\n<\/span><\/mark>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
We give each link a color<\/code> and strip the default underline with text\u2011decoration: none<\/code>. These are purely cosmetic, and we’ll revisit them later in the article.<\/p>\n\n\n
\n
\"Screenshot.
getting a little bit less rough<\/figcaption><\/figure>\n<\/div>\n\n\n
Next, we prepare the img<\/code> elements for future magic by sizing them and ensuring they act like well-behaved cats – no stretching! The responsive image height and the aspect ratio are also set as custom properties next to the link padding and separator line width – the purpose of doing so will become clear shortly.<\/p>\n\n\n
nav<\/span> a<\/span> {\n<\/span><\/span>  --pad<\/span>: min<\/span>(2em<\/span>, 4vw<\/span>);\n<\/span><\/span>  --l<\/span>: 1px<\/span>;\n<\/span><\/span>  --r<\/span>: 3<\/span>\/ 2<\/span>;\n<\/span><\/mark>  --h<\/span>: round<\/span>(down, min(4em<\/span>, 30vw<\/span>, 100<\/span>dvh\/(var(--n) + 1<\/span>)), 2px<\/span>);\n<\/span><\/mark>\t\n<\/span><\/span>  display<\/span>: flex;\n<\/span><\/span>  align-items<\/span>: center;\n<\/span><\/span>  justify-content<\/span>: space-between;\n<\/span><\/span>  border-bottom<\/span>: solid var<\/span>(--l) #000<\/span>;\n<\/span><\/span>  padding<\/span>: 0<\/span> var<\/span>(--pad);\n<\/span><\/span>}\n<\/span><\/span>\n<\/span><\/span>nav<\/span> img<\/span> {\n<\/span><\/mark>  height<\/span>: var<\/span>(--h);\n<\/span><\/mark>  aspect-ratio<\/span>: var<\/span>(--r);\n<\/span><\/mark>  object-fit<\/span>: cover;\n<\/span><\/mark>}\n<\/span><\/mark><\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n
\n
\"Screenshot.
all finally looking consistent<\/figcaption><\/figure>\n<\/div>\n\n\n
Since the images will flip in 3D, they also get backface-visibility: hidden<\/code>, so we only see them when they’re facing us and they\u2019re invisible when facing the back of the screen.<\/p>\n\n\n
nav<\/span> img<\/span> {\n<\/span><\/span>  height<\/span>: var<\/span>(--h);\n<\/span><\/span>  aspect-ratio<\/span>: var<\/span>(--r);\n<\/span><\/span>  object-fit<\/span>: cover;\n<\/span><\/span>  backface-visibility<\/span>: hidden;\n<\/span><\/mark>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
This is handy when we want to make sure they’re is facing the right way. We may comment this out for a little while a bit later just to take a peek and check they’re in the right position even when facing the other way.<\/p>\n\n\n\n
The next step is to use a grid<\/code> layout for it, limit the width of the grid’s one column<\/a>, and middle-align this grid within the element:<\/p>\n\n\n
The sibling-index()<\/code> and sibling-count()<\/code> CSS functions are not yet a thing cross-browser<\/a>, so we’re adding the item index and count as custom properties when we generate the HTML in order to pass them to the CSS. Because otherwise, the CSS does not know how many children an HTML element has.<\/p>\n\n\n\n