UNIT 20 • STAGE 4 OF 7
The Motion
Add hover animations using transition and transform: translateX() , make the explore arrows slide on hover
transition: What It Does and How to Read It
You have used transition before in buttons and links. This stage teaches you to read and write it deliberately. transition tells the browser: "when a property changes, do not snap, animate smoothly between the old value and the new one."
transition: transform 0.25s ease;
}
transform, which property to animate. Onlytransformchanges happen smoothly; other property changes snap.0.25s, how long the animation takes. 0.2–0.3s is the sweet spot for UI motion: fast enough to feel snappy, slow enough to read.ease, the timing function.easestarts fast and slows down at the end, which feels natural. Other options:linear,ease-in,ease-out,ease-in-out.
transition does not trigger the animation, :hover does
transition defines how a change looks. It does not cause the change. The :hover rule causes the change by setting a new value for the property. When the browser sees the new value, it applies the transition automatically.
transform: translateX(), Move Without Breaking Layout
transform: translateX() moves an element left or right. Positive values move right. Negative values move left. The key difference from margin or position: transform does not affect layout. The element moves visually but the surrounding content does not shift. This makes it perfect for hover effects.
display: inline-block; /* required, inline elements cannot be transformed */
transition: transform 0.25s ease;
}
.era-explore:hover .explore-arrow {
transform: translateX(6px); /* slides 6px to the right */
}
The display: inline-block on .explore-arrow is required. Inline elements like <span> ignore transform by default. Setting it to inline-block (or block, or flex) enables transform and all other box-model properties.
The selector .era-explore:hover .explore-arrow reads: "when an .era-explore link is hovered, target the .explore-arrow inside it." The hover is on the parent link; the transform happens on the child span.
Update the HTML and Add Entry Hover
To make the arrow slide independently, wrap the → in a <span class="explore-arrow">. Do this on all eight era entries.
Also add a hover effect to each era entry that highlights the left border. This combines transition on border-left-color with the :hover state:
border-left: 3px solid transparent; /* invisible at rest */
padding-left: 20px; /* space for the border */
transition: border-left-color 0.25s;
}
.era-entry:hover {
border-left-color: var(--gold); /* accent appears on hover */
}
Note that on mobile (under 768px), the entries are stacked vertically and the padding-left: 20px applies to the whole entry, the era number gets slightly indented. On desktop, the number column absorbs most of the visual and the padding feels natural. If you want to remove it on mobile, you can reset it inside a max-width query.
Stage 4 Complete!
The homepage now has motion. Hovering any era entry highlights the left border. Hovering the explore link slides the arrow right. Stage 5 builds the about/credits section using grid-template-areas, a technique for naming your grid regions and placing content into them by name instead of by position.
© 2026 Relentless Feather. All rights reserved.