12 CSS Ripple Effects 08 / 12

CSS Ripple Card Hover Effect

A six-card portfolio grid where each card fires a radial-gradient ripple from its center on hover via a CSS ::before pseudo-element — the ripple scale transitions from 0 to 2.5x with opacity fade. Six distinct warm palettes: amber, charcoal, terracotta, cream, deep-rust and oat. The icon bounces and an arrow link slides in. Syne + Syne Mono on linen.

Pure CSS MIT licensed
Live Demo Open in tab

This is a full-page demo — interact inside the frame above, or open it in the playground for the full-screen experience.

Open in playground

The code

<div class="rpl-08">
  <div class="rpl-08__header">
    <h1>Ripple Card Hover Effect</h1>
    <p>Radial gradient ripple expands from center on hover — pure CSS transitions</p>
  </div>

  <div class="rpl-08__grid">
    <div class="rpl-08__card rpl-08__card--a">
      <div class="rpl-08__card-num">01 / DESIGN</div>
      <span class="rpl-08__card-icon">🎨</span>
      <h3>Visual Systems</h3>
      <p>Cohesive design languages built from the ground up — color, type, motion.</p>
      <div class="rpl-08__arrow">Explore → </div>
    </div>

    <div class="rpl-08__card rpl-08__card--b">
      <div class="rpl-08__card-num">02 / CODE</div>
      <span class="rpl-08__card-icon">⌨️</span>
      <h3>Frontend Engineering</h3>
      <p>Production-grade CSS, zero-dependency animations, WebGL experiments.</p>
      <div class="rpl-08__arrow">View work → </div>
    </div>

    <div class="rpl-08__card rpl-08__card--c">
      <div class="rpl-08__card-num">03 / MOTION</div>
      <span class="rpl-08__card-icon">✦</span>
      <h3>Interaction Design</h3>
      <p>Micro-interactions, page transitions and haptic-inspired feedback loops.</p>
      <div class="rpl-08__arrow">See demos → </div>
    </div>

    <div class="rpl-08__card rpl-08__card--d">
      <div class="rpl-08__card-num">04 / BRAND</div>
      <span class="rpl-08__card-icon">◈</span>
      <h3>Identity & Type</h3>
      <p>Custom wordmarks, editorial typography and brand system documentation.</p>
      <div class="rpl-08__arrow">Browse → </div>
    </div>

    <div class="rpl-08__card rpl-08__card--e">
      <div class="rpl-08__card-num">05 / LAB</div>
      <span class="rpl-08__card-icon">🧪</span>
      <h3>Experiments</h3>
      <p>Weird CSS, generative art, shader sketches and ideas with no brief.</p>
      <div class="rpl-08__arrow">Open lab → </div>
    </div>

    <div class="rpl-08__card rpl-08__card--f">
      <div class="rpl-08__card-num">06 / ABOUT</div>
      <span class="rpl-08__card-icon">👤</span>
      <h3>Hello, I'm Mara</h3>
      <p>Designer-developer. I believe the best interfaces feel inevitable.</p>
      <div class="rpl-08__arrow">Say hi → </div>
    </div>
  </div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=Syne+Mono&display=swap');

.rpl-08, .rpl-08 *, .rpl-08 *::before, .rpl-08 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.rpl-08 ::selection { background: #ff9500; color: #1a0e00; }

.rpl-08 {
  font-family: 'Syne', sans-serif;
  background: #f5f0eb;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  padding: 64px 24px;
  color: #1a1209;
}

.rpl-08__header {
  text-align: center;
}
.rpl-08__header h1 {
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #1a1209;
}
.rpl-08__header p {
  margin-top: 10px;
  font-size: 0.95rem;
  color: rgba(26,18,9,0.5);
}

/* ─── Card grid ─── */
.rpl-08__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  width: min(920px, 100%);
}

/* Base card */
.rpl-08__card {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: 32px;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.3s;
}
.rpl-08__card:hover { transform: translateY(-6px) scale(1.01); }

/* Ripple on hover: pseudoelement that expands from center */
.rpl-08__card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1), opacity 0.4s;
  opacity: 0;
  pointer-events: none;
  transform-origin: center;
}
.rpl-08__card:hover::before {
  transform: scale(2.5);
  opacity: 1;
}

/* Card A — sand/amber */
.rpl-08__card--a {
  background: #ffd185;
  box-shadow: 0 4px 20px rgba(255,149,0,0.2), inset 0 1px 0 rgba(255,255,255,0.6);
}
.rpl-08__card--a:hover { box-shadow: 0 20px 60px rgba(255,149,0,0.3); }
.rpl-08__card--a::before { background: radial-gradient(circle, rgba(255,200,80,0.6), transparent); }

/* Card B — warm charcoal */
.rpl-08__card--b {
  background: #2a2016;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  color: #f5ede0;
}
.rpl-08__card--b:hover { box-shadow: 0 20px 60px rgba(0,0,0,0.4); }
.rpl-08__card--b::before { background: radial-gradient(circle, rgba(255,149,0,0.25), transparent); }

/* Card C — terracotta */
.rpl-08__card--c {
  background: #e07050;
  box-shadow: 0 4px 20px rgba(224,112,80,0.3);
  color: #fff;
}
.rpl-08__card--c:hover { box-shadow: 0 20px 60px rgba(224,112,80,0.5); }
.rpl-08__card--c::before { background: radial-gradient(circle, rgba(255,200,170,0.5), transparent); }

/* Card D — cream */
.rpl-08__card--d {
  background: #fffaf3;
  border: 2px solid rgba(26,18,9,0.1);
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.rpl-08__card--d:hover { box-shadow: 0 20px 60px rgba(0,0,0,0.1); }
.rpl-08__card--d::before { background: radial-gradient(circle, rgba(255,200,100,0.35), transparent); }

/* Card E — deep rust */
.rpl-08__card--e {
  background: #5c1a00;
  box-shadow: 0 4px 20px rgba(92,26,0,0.4);
  color: #ffd185;
}
.rpl-08__card--e:hover { box-shadow: 0 20px 60px rgba(92,26,0,0.6); }
.rpl-08__card--e::before { background: radial-gradient(circle, rgba(255,149,0,0.3), transparent); }

/* Card F — oat */
.rpl-08__card--f {
  background: linear-gradient(135deg, #e8dcc8, #d4c4a8);
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.rpl-08__card--f:hover { box-shadow: 0 20px 60px rgba(0,0,0,0.15); }
.rpl-08__card--f::before { background: radial-gradient(circle, rgba(255,255,220,0.5), transparent); }

/* Card content */
.rpl-08__card-num {
  font-family: 'Syne Mono';
  font-size: 0.72rem;
  opacity: 0.45;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
  position: relative;
  z-index: 2;
}
.rpl-08__card-icon {
  font-size: 2.2rem;
  margin-bottom: 14px;
  display: block;
  position: relative;
  z-index: 2;
  transition: transform 0.3s;
}
.rpl-08__card:hover .rpl-08__card-icon { transform: scale(1.15) rotate(-5deg); }
.rpl-08__card h3 {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  z-index: 2;
  margin-bottom: 8px;
}
.rpl-08__card p {
  font-size: 0.88rem;
  line-height: 1.5;
  opacity: 0.65;
  font-weight: 400;
  position: relative;
  z-index: 2;
}

.rpl-08__card .rpl-08__arrow {
  position: relative;
  z-index: 2;
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.3s, transform 0.3s;
}
.rpl-08__card:hover .rpl-08__arrow {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 640px) { .rpl-08__grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .rpl-08__card, .rpl-08__card::before,
  .rpl-08__card-icon, .rpl-08__arrow { transition: none !important; }
}

More from 12 CSS Ripple Effects

CSS Water Ripple Click EffectCSS Ripple Button Click AnimationCSS Pond Ripple Background AnimationCSS Heartbeat Pulse Ripple EffectCSS Ripple Login Form UICSS Aurora Borealis Ripple BackgroundCSS Neon Glow Ripple EffectCSS Ripple Loading SpinnerCSS Sonar Ping Ripple AnimationCSS Sound Wave Ripple VisualizerCSS Liquid Drop Ripple Animation
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →