6 Card Hover Effects That Make Portfolios Feel Premium

Hover polish is what makes reviewers say "this feels professional". Six effects, all GPU-friendly.

1. Lift + shadow (the baseline)

.card { transition: transform .2s, box-shadow .2s; }
.card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.25); }

2. Image zoom inside

.card .img-wrap { overflow: hidden; }
.card img { transition: transform .35s; }
.card:hover img { transform: scale(1.06); }

3. Border glow

.card:hover { border-color: rgba(109,111,251,.5);
  box-shadow: 0 0 0 1px rgba(109,111,251,.3), 0 12px 32px rgba(109,111,251,.15); }

4. Shine sweep

.card::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.15) 50%, transparent 60%);
  translate: -100% 0; transition: translate .5s; }
.card:hover::after { translate: 100% 0; }

5. Tilt · 6. Gradient reveal

.card:hover { transform: perspective(600px) rotateX(2deg) rotateY(-3deg); }

.card::before { content: ""; position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(135deg, rgba(109,111,251,.12), transparent);
  transition: opacity .25s; }
.card:hover::before { opacity: 1; }

Rules: 150–350ms durations, only transform/opacity/shadow, and pair every hover with a :focus-visible equivalent for keyboards. See them live on our homepage cards.

← All Articles