Unit 4 · Stage 4

Hover Effects

Your calendar looks good, but it is completely still. Nothing responds when you move the mouse across it. In this stage you make each season card come alive with the CSS :hover pseudo-class, so a card lifts and darkens the moment a user points at it. Play in the editor, or press 👀 Type it with me to be guided. (pause on a highlighted word to see what it does)

📦 Quick recap. You already have four colored season cards, each with a name and a list of activities. Every property you have used lives in the 📖 Glossary at the top. This stage adds one new idea: styling an element based on its state.

1 What is a pseudo-class?

A pseudo-class is a keyword you add to a selector to style an element based on its STATE, not just what it is. :hover is the most common one. It means: apply these styles while the user's mouse is over this element.

Styling by state, not just by name

:hover: Targets an element only while the pointer is over it. The moment the mouse leaves, the styles switch back on their own.
selector:hover { ... }: The way you write it. The colon is part of the syntax, joined right onto the selector with no space, like .season:hover.
Other pseudo-classes: :focus applies while an input is selected, and :visited applies after a link has been clicked. Same idea, different states.

🖱️ Why it matters. Hover feedback tells a user that something is interactive. It is a small signal that makes a page feel responsive and alive instead of flat.

2 Add the hover lift

Make sure the .season rule has cursor: pointer, then add a brand new .season:hover block below it that lifts the card and deepens its shadow.

What this code means

cursor: pointer: Changes the mouse cursor from the default arrow to a hand while over the card, the same cursor you see over a link. It signals that the card is interactive.
transform: translateY(-6px): Moves the card 6 pixels upward on hover. translateY controls vertical motion, and a negative value moves up, so the card looks like it lifts off the page.
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25): A deeper shadow on hover. The larger vertical offset (10px) and blur (28px) make the card look higher off the page, which reinforces the lift.

✍️ Add the .season:hover rule inside your <style> tag, just below the .season rule. Use the example below, then press ▶ Run and hover over a card.

.season {
  ... existing rules ...
  cursor: pointer;
}

.season:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
}

🤔 Quick check before you go on

What pseudo-class did you add so a card reacts when the mouse is over it? Type it with the colon, then press Submit to unlock the last step.

3 Darken each season on hover

The lift works, but every card still keeps its exact color while hovered. Add a hover rule for each season that swaps in a slightly darker shade of the same hue.

What this code means

.spring:hover { background-color: #3d6b4a }: A darker forest green, one step down from the default spring color.
.summer:hover, .fall:hover, .winter:hover: Each swaps in a deeper version of that season's own color, so the change reads as the same card responding, not a different card.
Why darken?: Darkening on hover is a universal convention for interactive elements. It confirms the user's action and quietly says: you are here.

✍️ Add these four hover rules inside your <style> tag, then press ▶ Run and hover over each card.

.spring:hover { background-color: #3d6b4a; }
.summer:hover { background-color: #ad881a; }
.fall:hover   { background-color: #9a4f2a; }
.winter:hover { background-color: #2f4357; }

4 Make it your own

Hover over each card in the preview and watch it lift and darken. Then experiment, and set it back the way you like it.

Change translateY(-6px) to translateY(-12px) for a bigger lift, then try a smaller one.
Make the hover shadow softer or stronger by changing the blur value in box-shadow.
Pick your own darker shade for each season's hover color.
If nothing moves, check that you spelled :hover with a colon, not a dot.

✓ Finish this stage

To complete Stage 4, your cards need a .season:hover lift and a darker hover color for each season. Press Check my work when you are ready. This opens Stage 5 and lets your teacher see that you finished.

YOUR CODE

PREVIEW