20 CSS Profile Cards04 / 20

Pure CSSMIT licensed

Social Icons Slide-up Overlay Card

A portrait card whose avatar fills the frame, with social icons that stagger up from the bottom edge and a gentle image zoom on hover.

Published

Live Demo
Try it

The code

<div class="pc-04">
  <div class="pc-04__card">
    <div class="pc-04__portrait">
      <div class="pc-04__pfp">JM</div>
      <div class="pc-04__grad"></div>
      <div class="pc-04__overlay">
        <a class="pc-04__soc" style="--i:0" aria-label="Twitter">&#120143;</a>
        <a class="pc-04__soc" style="--i:1" aria-label="GitHub">&#9670;</a>
        <a class="pc-04__soc" style="--i:2" aria-label="Site">&#8734;</a>
        <a class="pc-04__soc" style="--i:3" aria-label="Mail">&#9993;</a>
      </div>
    </div>
    <div class="pc-04__body">
      <h3>Jonas Meyer</h3>
      <p>Creative Technologist</p>
    </div>
  </div>
</div>
.pc-04,
.pc-04 *,
.pc-04 *::before,
.pc-04 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.pc-04 ::selection {
  background: #ff7a45;
  color: #fff;
}

.pc-04 {
  --ink: #fff;
  font-family: 'Segoe UI',system-ui,sans-serif;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  background: #0d0d12;
  color: var(--ink);
}

.pc-04__card {
  width: 290px;
  border-radius: 24px;
  overflow: hidden;
  background: #15151d;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 30px 70px -28px rgba(0,0,0,.8);
}

.pc-04__portrait {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
}

.pc-04__pfp {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 4rem;
  font-weight: 800;
  letter-spacing: .02em;
  color: rgba(255,255,255,.92);
  background: radial-gradient(circle at 30% 30%,#ff7a45,transparent 55%), radial-gradient(circle at 75% 70%,#a445ff,transparent 55%), linear-gradient(145deg,#2a1840,#401f2f);
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}

.pc-04__card:hover .pc-04__pfp {
  transform: scale(1.08);
}

.pc-04__grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,rgba(13,13,18,.95) 0%,transparent 55%);
}

.pc-04__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
  padding-bottom: 24px;
}

.pc-04__soc {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 1.05rem;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transform: translateY(80px);
  opacity: 0;
  transition: transform .5s cubic-bezier(.2,.9,.2,1),opacity .4s,background .25s;
  transition-delay: calc(var(--i) * .06s);
}

.pc-04__card:hover .pc-04__soc {
  transform: translateY(0);
  opacity: 1;
}

.pc-04__soc:hover {
  background: rgba(255,255,255,.26);
}

.pc-04__body {
  padding: 20px 22px;
  text-align: center;
}

.pc-04__body h3 {
  font-size: 1.3rem;
  font-weight: 800;
}

.pc-04__body p {
  color: rgba(255,255,255,.55);
  font-size: .86rem;
  margin-top: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .pc-04__soc {
    transition: opacity .3s;
  }

  .pc-04__card:hover .pc-04__pfp {
    transform: none;
  }
}
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Profile Card from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Social Icons Slide-up Overlay Card
Source: https://codefronts.com/components/css-profile-cards/social-icons-slide-up-overlay-card/

A portrait card whose avatar fills the frame, with social icons that stagger up from the bottom edge and a gentle image zoom on hover.
## HTML
```html
<div class="pc-04">
  <div class="pc-04__card">
    <div class="pc-04__portrait">
      <div class="pc-04__pfp">JM</div>
      <div class="pc-04__grad"></div>
      <div class="pc-04__overlay">
        <a class="pc-04__soc" style="--i:0" aria-label="Twitter">&#120143;</a>
        <a class="pc-04__soc" style="--i:1" aria-label="GitHub">&#9670;</a>
        <a class="pc-04__soc" style="--i:2" aria-label="Site">&#8734;</a>
        <a class="pc-04__soc" style="--i:3" aria-label="Mail">&#9993;</a>
      </div>
    </div>
    <div class="pc-04__body">
      <h3>Jonas Meyer</h3>
      <p>Creative Technologist</p>
    </div>
  </div>
</div>
```
## CSS
```css
.pc-04,
.pc-04 *,
.pc-04 *::before,
.pc-04 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.pc-04 ::selection {
  background: #ff7a45;
  color: #fff;
}

.pc-04 {
  --ink: #fff;
  font-family: 'Segoe UI',system-ui,sans-serif;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  background: #0d0d12;
  color: var(--ink);
}

.pc-04__card {
  width: 290px;
  border-radius: 24px;
  overflow: hidden;
  background: #15151d;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 30px 70px -28px rgba(0,0,0,.8);
}

.pc-04__portrait {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
}

.pc-04__pfp {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 4rem;
  font-weight: 800;
  letter-spacing: .02em;
  color: rgba(255,255,255,.92);
  background: radial-gradient(circle at 30% 30%,#ff7a45,transparent 55%), radial-gradient(circle at 75% 70%,#a445ff,transparent 55%), linear-gradient(145deg,#2a1840,#401f2f);
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}

.pc-04__card:hover .pc-04__pfp {
  transform: scale(1.08);
}

.pc-04__grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,rgba(13,13,18,.95) 0%,transparent 55%);
}

.pc-04__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
  padding-bottom: 24px;
}

.pc-04__soc {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 1.05rem;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transform: translateY(80px);
  opacity: 0;
  transition: transform .5s cubic-bezier(.2,.9,.2,1),opacity .4s,background .25s;
  transition-delay: calc(var(--i) * .06s);
}

.pc-04__card:hover .pc-04__soc {
  transform: translateY(0);
  opacity: 1;
}

.pc-04__soc:hover {
  background: rgba(255,255,255,.26);
}

.pc-04__body {
  padding: 20px 22px;
  text-align: center;
}

.pc-04__body h3 {
  font-size: 1.3rem;
  font-weight: 800;
}

.pc-04__body p {
  color: rgba(255,255,255,.55);
  font-size: .86rem;
  margin-top: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .pc-04__soc {
    transition: opacity .3s;
  }

  .pc-04__card:hover .pc-04__pfp {
    transform: none;
  }
}
```

How this works

The portrait uses aspect-ratio:1 and an overflow:hidden frame so the avatar always fills a perfect square. Icons start pushed below the frame with transform:translateY(80px) and opacity:0; on hover they animate to rest, each delayed by calc(var(--i) * .06s) so they cascade rather than move as a block.

A bottom-anchored linear-gradient scrim keeps the icons legible over any avatar, and the portrait itself scales with transform:scale(1.08) on hover — both animated properties are compositor-friendly, so the reveal stays smooth.

Make it yours

  • Change the cascade speed by editing the --i multiplier in the icon transition-delay.
  • Swap the two-tone avatar wash by editing the layered radial-gradients on .pc-04__pfp.
  • Adjust zoom depth with the scale(1.08) on the hovered portrait.
  • Tune scrim darkness via the linear-gradient stop on .pc-04__grad.

Gotchas — read before shipping

  • Staggered transition-delay also applies on the way out unless you reset delays to 0 on the non-hover state.
  • Hover-only reveals hide the icons entirely on touch — expose them on :focus-within or tap for mobile.
  • aspect-ratio plus object-fit:cover is what stops real avatars from stretching; keep both when swapping the placeholder for an <img>.

Browser support

ChromeSafariFirefoxEdge
88+15+89+88+

aspect-ratio needs Chrome 88+/Safari 15+; below that give the portrait a fixed height.

Techniques used in this demo

aspect-ratioMDN ↗backdrop-filterMDN ↗radial-gradient()MDN ↗place-items / place-contentMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →