Workshop › My business card › Step 12 of 12

Build it yourself: a card that reacts

What we are doing

Make the whole card grow a little when the mouse is over it, smoothly.

Your turn

• .card:hover makes the card larger with transform: scale(...) (a bit above 1, like 1.05).
• .card gets a transition for transform, so the change takes a moment instead of jumping.

Skills: Styling with CSS

← Links that react

All steps

1. Your name as a heading
2. A line about you
3. Put them in a box
4. Your first CSS
5. Make the box look like a card
6. Center the card
7. A soft shadow
8. Color your name
9. Add your links
10. Links in a row
11. Links that react
12. Build it yourself: a card that reacts