A card that lifts – CSS Exercise with Solution

Build a card that responds to both pointer and keyboard.

What to build

A card that lifts on hover and focus.

Requirements

.card transitions transform over 0.2s with ease-out.
.card:hover and .card:focus-visible share a rule with transform: translateY(-4px).
The rule must not change top, margin or width.

Constraints

Only use transform for the movement.

Example

transform: translateX(10px);

Why it works

A transform leaves the layout untouched, so that neighbouring cards do not jump, and the browser can animate it smoothly.

Hints

Hint 1

translateY with a negative value moves up.

Hint 2

Share the rule with focus-visible.

Hint 3

transition names the property.

Solution

Show one correct solution (try it yourself first)

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Lift</title>
  <style>
    .card {
      display: block;
      padding: 20px;
      background: lightcyan;
      transition: transform 0.2s ease-out;
    }
    .card:hover, .card:focus-visible { transform: translateY(-4px); }
  </style>
</head>
<body>
  <a class="card" href="/guide">A guide</a>
</body>
</html>

Lesson: Transitions, transforms and animations →