← Visual Library / Effects

Card lift on hover

Cards lift toward the viewer and gain a soft shadow when hovered. Communicates 'this is clickable' without an explicit button.

Effects Built

Use when — you have a grid of clickable cards (services, projects, blog posts) and want users to feel they can interact. The 300ms canonical transition gives a polished, expensive feel.

Live demo

Analysis

Pinpoint what's broken or unmeasured in your data.

Dashboards

Live Power BI / Looker for the questions that recur.

Automation

Workflow plumbing so the busywork stops landing on your team.

↑ Hover any card.

CSS

.card {
  background: white;
  border: 1px solid #e7e4dd;
  border-radius: 12px;
  padding: 22px;
  cursor: pointer;
  transition:
    transform 0.3s cubic-bezier(0.19, 1, 0.22, 1),
    box-shadow 0.3s cubic-bezier(0.19, 1, 0.22, 1),
    border-color 0.3s;
  will-change: transform;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.08);
  border-color: var(--accent);
}

Dials

Lift distance: -4px is the canonical "subtle lift." -8px for "stands up to greet you" energy. More than 10 px starts to feel cartoony.

Easing: cubic-bezier(0.19, 1, 0.22, 1) — fast start, gentle finish. Reads as decisive.

Shadow: bigger Y-offset + larger blur = more lift perception. Match the lift height visually.

Border accent: optional — gives a clear "selected" feel.

Source: Jono Catliff masterclass, 2026-05-19. See masterclass notes.