Make hover motion work with touch and keyboard use

Hover motion should enhance a control that already works with touch and keyboard input. Do not put essential information only behind hover. Use actual links and buttons, keep focus visible, and restrict pointer-specific effects to devices that support them.

Start with the right element

A clickable div with a lift effect still lacks the default keyboard behavior of a button or link. Choose the semantic element based on the action. A link navigates; a button performs an action. Styling should follow that choice, not replace it.

.card-link {
  display: block;
  transition: transform 160ms ease-out;
}
.card-link:focus-visible {
  outline: 3px solid #213db8;
  outline-offset: 4px;
}
@media (hover: hover) and (pointer: fine) {
  .card-link:hover { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .card-link { transition: none; }
  .card-link:hover { transform: none; }
}

The colors and timing are example values. Check contrast against your actual background. A focus outline and a hover movement communicate different things; keyboard users do not need the movement to see the focus.

Keep information visible

A card’s title, price, or action should not appear only when the pointer enters. On touch, there may be no stable hover state. If you use a tooltip for extra explanation, give it an accessible trigger and do not use it as the sole place for required instructions.

Test three paths

Try a hybrid device if it matters to your audience. Media queries describe input capabilities, not a permanent category of person or device.

Keep the effect subordinate

If a whole card moves, check nearby controls and hit targets during the transition. A small decorative movement should not make the action harder to select. Reduce or remove the effect when it competes with reading, causes accidental activation, or makes the interface feel unstable.