20 CSS Image Hover Effects 16 / 20

Circular Team Profile Avatar Hover CSS

About-page avatar hover with a conic-gradient spinning border trail and slide-up social icon reveal driven by CSS animation-play-state.

Pure CSS MIT licensed
Live Demo Open in tab
Open in playground

The code

<div class="ih-16">
  <div class="ih-16__grid">
    <div class="ih-16__item">
      <div class="ih-16__wrap">
        <div class="ih-16__avatar ih-16__avatar--1">👩‍💻</div>
      </div>
      <p class="ih-16__name">Yuki Tanaka</p>
      <p class="ih-16__role">Frontend Eng.</p>
      <div class="ih-16__socials"><span class="ih-16__s">𝕏</span><span class="ih-16__s">gh</span></div>
    </div>
    <div class="ih-16__item">
      <div class="ih-16__wrap">
        <div class="ih-16__avatar ih-16__avatar--2">👨‍🎨</div>
      </div>
      <p class="ih-16__name">Amara Diallo</p>
      <p class="ih-16__role">UX Designer</p>
      <div class="ih-16__socials"><span class="ih-16__s">𝕏</span><span class="ih-16__s">be</span></div>
    </div>
    <div class="ih-16__item">
      <div class="ih-16__wrap">
        <div class="ih-16__avatar ih-16__avatar--3">🧑‍🔬</div>
      </div>
      <p class="ih-16__name">Ravi Patel</p>
      <p class="ih-16__role">Data Scientist</p>
      <div class="ih-16__socials"><span class="ih-16__s">𝕏</span><span class="ih-16__s">in</span></div>
    </div>
    <div class="ih-16__item">
      <div class="ih-16__wrap">
        <div class="ih-16__avatar ih-16__avatar--4">👩‍🚀</div>
      </div>
      <p class="ih-16__name">Zoe Mercer</p>
      <p class="ih-16__role">DevOps Lead</p>
      <div class="ih-16__socials"><span class="ih-16__s">gh</span><span class="ih-16__s">in</span></div>
    </div>
  </div>
</div>
.ih-16,.ih-16 *,.ih-16 *::before,.ih-16 *::after{margin:0;padding:0;box-sizing:border-box}
.ih-16 ::selection{background:#a78bfa;color:#000}
.ih-16{
  --accent:#a78bfa;--accent2:#34d399;--bg:#080812;--text:#f1f5f9;--muted:#64748b;
  font-family:system-ui,sans-serif;background:var(--bg);padding:40px 24px;
  min-height: 100vh;display:flex;align-items:center;justify-content:center;
}
.ih-16__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:780px;width:100%}
.ih-16__item{display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer}

/* Conic gradient spinning ring via pseudo-element */
.ih-16__wrap{
  position:relative;width:80px;height:80px;
}
.ih-16__wrap::before{
  content:'';position:absolute;inset:-3px;border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0deg 270deg, var(--ring-color,var(--accent)) 270deg 360deg);
  opacity:0;
  transition:opacity 0.3s ease;
  animation:ih-16-spin 1.2s linear infinite paused;
}
.ih-16__item:hover .ih-16__wrap::before{opacity:1;animation-play-state:running}

@keyframes ih-16-spin{to{transform:rotate(360deg)}}

/* The avatar itself */
.ih-16__avatar{
  position:relative;z-index:1;
  width:74px;height:74px;border-radius:50%;margin:3px;
  display:flex;align-items:center;justify-content:center;font-size:34px;
  transition:transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.ih-16__item:hover .ih-16__avatar{transform:scale(1.06)}
.ih-16__avatar--1{background:radial-gradient(circle at 30% 30%,#4c1d95,#0f172a)}
.ih-16__avatar--2{background:radial-gradient(circle at 30% 30%,#065f46,#0f172a)}
.ih-16__avatar--3{background:radial-gradient(circle at 30% 30%,#92400e,#0f172a)}
.ih-16__avatar--4{background:radial-gradient(circle at 30% 30%,#1e3a5f,#0f172a)}

/* Individual ring colours */
.ih-16__item:nth-child(1) .ih-16__wrap{--ring-color:#a78bfa}
.ih-16__item:nth-child(2) .ih-16__wrap{--ring-color:#34d399}
.ih-16__item:nth-child(3) .ih-16__wrap{--ring-color:#fb923c}
.ih-16__item:nth-child(4) .ih-16__wrap{--ring-color:#60a5fa}

/* Social icons slide up on hover */
.ih-16__socials{
  display:flex;gap:6px;margin-top:2px;
  transform:translateY(6px);opacity:0;
  transition:transform 0.3s cubic-bezier(0.16,1,0.3,1),opacity 0.3s ease;
}
.ih-16__item:hover .ih-16__socials{transform:none;opacity:1}
.ih-16__s{font-size:12px;background:rgba(255,255,255,0.07);border-radius:4px;padding:2px 5px;color:var(--muted)}

.ih-16__name{font-size:12px;font-weight:700;color:var(--text);text-align:center}
.ih-16__role{font-size:10px;color:var(--muted);text-align:center}

@media(prefers-reduced-motion:reduce){
  .ih-16__wrap::before{animation:none}
  .ih-16__avatar,.ih-16__socials{transition:none}
  .ih-16__item:hover .ih-16__wrap::before{opacity:1}
  .ih-16__item:hover .ih-16__socials{opacity:1;transform:none}
}

How this works

A spinning arc ring is created using a conic-gradient(from 0deg, transparent 0deg 270deg, var(--ring-color) 270deg 360deg) applied to a ::before pseudo-element. This creates a comet-tail arc (one quarter of the circle coloured, the rest transparent). At rest, the animation-play-state is paused; on hover it switches to running, causing the arc to spin continuously without adding/removing any class.

The inner avatar sits at z-index: 1 with a margin: 3px inside the pseudo-element to show the ring boundary. Social icon links start at opacity: 0; transform: translateY(6px) and animate to natural position on hover — no JavaScript required. The per-card ring colour is controlled by a --ring-color CSS custom property set on the .item:nth-child() selector.

Customize

  • Change the arc coverage by modifying 270deg — 180deg gives a half-ring, 90deg gives a short comet tail.
  • Speed up the spin with animation-duration: 0.8s for a fast rotation, or slow to 3s for a hypnotic meditation ring.
  • Replace the conic-gradient arc with a solid ring by setting all stops to the accent colour for a constant ring (no arc, just a coloured border).
  • Add animation-direction: reverse on alternate cards for rings spinning in opposite directions.
  • Combine the spinning ring with a border: 2px dashed rgba(255,255,255,0.1) at rest for a subtle dotted placeholder ring before hover.

Watch out for

  • conic-gradient is not supported in Firefox below version 83 — provide a solid border fallback using @supports not (background: conic-gradient(red, blue)).
  • The animation-play-state toggle technique requires the animation to be defined at rest (with paused state) — if it is defined only on hover, pausing does not work.
  • In Safari, conic-gradient clipping to a border-radius: 50% circle can render 1–2px of the gradient beyond the circle edge — add overflow: hidden on the wrapper as a fix.

Browser support

ChromeSafariFirefoxEdge
69+ 12.1+ 83+ 69+

conic-gradient is not supported in legacy Edge (pre-Chromium). Use a solid border fallback for those environments.

More from 20 CSS Image Hover Effects

CSS Image Clip-Path Transition HoverCSS Shining Light Glare Image HoverCSS Image Split Transition HoverCSS Image Ripple Animation HoverCSS Masonry Gallery Zoom HoverCSS Image Icon Reveal Center HoverCSS Image Card Flip 3D Animation HoverCSS Image Tilt 3D Perspective HoverCSS Fullscreen Background Image HoverCSS Image Hover Zoom In CardCSS Hover Reveal Text Over ImageE-Commerce Product Image Swap on Hover
View the full collection →

Search CodeFronts

Loading…

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