20 CSS Image Hover Effects 09 / 20

Glassmorphism Overlay on Image Hover

A frosted-glass descriptive card slides up from below the image frame on hover, using backdrop-filter for the blurred panel effect.

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

The code

<div class="ih-09">
  <div class="ih-09__grid">
    <div class="ih-09__card">
      <div class="ih-09__bg ih-09__bg--1"><span class="ih-09__icon">🌸</span></div>
      <div class="ih-09__static"><p class="ih-09__static-name">Spring Collection</p></div>
      <div class="ih-09__glass">
        <p class="ih-09__glass-label">Collection</p>
        <p class="ih-09__glass-title">Spring Bloom 2025</p>
        <p class="ih-09__glass-desc">Ethereal violet pieces inspired by cherry blossom season</p>
        <div class="ih-09__glass-footer">
          <span class="ih-09__glass-stat">24 pieces</span>
          <span class="ih-09__glass-cta">Explore →</span>
        </div>
      </div>
    </div>
    <div class="ih-09__card">
      <div class="ih-09__bg ih-09__bg--2"><span class="ih-09__icon">🍃</span></div>
      <div class="ih-09__static"><p class="ih-09__static-name">Earth Tones</p></div>
      <div class="ih-09__glass">
        <p class="ih-09__glass-label">Sustainable</p>
        <p class="ih-09__glass-title">Forest Origins</p>
        <p class="ih-09__glass-desc">Organic cotton pieces dyed with natural plant extracts</p>
        <div class="ih-09__glass-footer">
          <span class="ih-09__glass-stat">18 pieces</span>
          <span class="ih-09__glass-cta">Explore →</span>
        </div>
      </div>
    </div>
    <div class="ih-09__card">
      <div class="ih-09__bg ih-09__bg--3"><span class="ih-09__icon">🌊</span></div>
      <div class="ih-09__static"><p class="ih-09__static-name">Azure Line</p></div>
      <div class="ih-09__glass">
        <p class="ih-09__glass-label">Limited</p>
        <p class="ih-09__glass-title">Azure Coast</p>
        <p class="ih-09__glass-desc">Mediterranean-inspired linen pieces for summer living</p>
        <div class="ih-09__glass-footer">
          <span class="ih-09__glass-stat">12 pieces</span>
          <span class="ih-09__glass-cta">Explore →</span>
        </div>
      </div>
    </div>
  </div>
</div>
.ih-09,.ih-09 *,.ih-09 *::before,.ih-09 *::after{margin:0;padding:0;box-sizing:border-box}
.ih-09 ::selection{background:rgba(139,92,246,0.8);color:#fff}
.ih-09{
  --accent:#8b5cf6;--accent2:#34d399;--bg:#060611;--text:#f1f5f9;--muted:#94a3b8;
  --duration:0.45s;--ease:cubic-bezier(0.16,1,0.3,1);
  font-family:system-ui,sans-serif;background:var(--bg);padding:40px 24px;
  min-height: 100vh;display:flex;align-items:center;justify-content:center;
}
.ih-09__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:780px;width:100%}
.ih-09__card{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:3/4;cursor:pointer}
.ih-09__bg{position:absolute;inset:0;transition:transform var(--duration) var(--ease);display:flex;align-items:center;justify-content:center}
.ih-09__bg--1{background:linear-gradient(145deg,#1a0a2e,#2d1b69,#4c1d95,#7c3aed)}
.ih-09__bg--2{background:linear-gradient(145deg,#022c22,#065f46,#059669,#34d399)}
.ih-09__bg--3{background:linear-gradient(145deg,#0c1445,#1e3a8a,#1d4ed8,#60a5fa)}
.ih-09__card:hover .ih-09__bg{transform:scale(1.08)}
.ih-09__icon{font-size:60px;opacity:0.3;transition:opacity var(--duration) var(--ease)}
.ih-09__card:hover .ih-09__icon{opacity:0.08}

/* The glass card: backdrop-filter applies to everything behind it in the stacking context */
.ih-09__glass{
  position:absolute;left:12px;right:12px;bottom:12px;
  background:rgba(255,255,255,0.08);
  backdrop-filter:blur(12px) saturate(1.5);
  -webkit-backdrop-filter:blur(12px) saturate(1.5);
  border:1px solid rgba(255,255,255,0.15);
  border-radius:12px;padding:16px;
  transform:translateY(calc(100% + 16px));
  opacity:0;
  transition:transform var(--duration) var(--ease), opacity var(--duration) var(--ease);
}
.ih-09__card:hover .ih-09__glass{transform:translateY(0);opacity:1}

.ih-09__glass-label{font-size:9px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.ih-09__glass-title{font-size:14px;font-weight:700;color:var(--text);margin-bottom:4px}
.ih-09__glass-desc{font-size:11px;color:rgba(241,245,249,0.7);line-height:1.5}
.ih-09__glass-footer{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.ih-09__glass-stat{font-size:10px;color:var(--muted)}
.ih-09__glass-cta{font-size:10px;font-weight:700;color:var(--accent);letter-spacing:0.06em}

/* Static bottom gradient so card has content even before hover */
.ih-09__static{position:absolute;bottom:0;left:0;right:0;padding:16px;background:linear-gradient(to top,rgba(0,0,0,0.7) 0%,transparent 100%)}
.ih-09__static-name{font-size:13px;font-weight:600;color:var(--text);transition:opacity var(--duration) var(--ease)}
.ih-09__card:hover .ih-09__static-name{opacity:0}

@media(prefers-reduced-motion:reduce){
  .ih-09__bg,.ih-09__icon,.ih-09__glass,.ih-09__static-name{transition:none}
  .ih-09__glass{transform:none;opacity:1}
}

How this works

The glass card starts at transform: translateY(calc(100% + 16px)) — entirely below the image frame — and at opacity: 0. On hover, it animates to translateY(0) and full opacity. Its backdrop-filter: blur(12px) saturate(1.5) blurs and slightly oversaturates the image pixels directly behind it, producing the frosted appearance. A thin border: 1px solid rgba(255,255,255,0.15) and a semi-transparent background complete the frosted-glass look.

A persistent bottom gradient strip remains visible at rest so the card always has text-over-image content for screen readers. On hover the strip title fades out as the glass card takes over, preventing a content flash. The glass and the image are siblings in the same stacking context, which is why backdrop-filter can blur the image.

Customize

  • Increase blur() to 20px for a fully opaque frosted-glass look, or decrease to 4px for a subtle haze.
  • Tint the glass background with rgba(var(--brand-rgb), 0.1) to create a brand-coloured frosted panel.
  • Add a horizontal slide variant: set transform: translateX(100%) at rest and translateX(0) on hover for a side-drawer reveal.
  • Combine with a subtle image scale(1.08) on hover to push the image visually behind the glass card.
  • Ensure the glass card has a minimum height via min-height so short content does not result in a thin panel that looks broken.

Watch out for

  • backdrop-filter CANNOT blur content that is not a sibling or ancestor of the filtered element — it only affects what is rendered behind it in the same stacking context.
  • Firefox added backdrop-filter support in version 103; users on older Firefox will see the glass panel without any blur.
  • Setting overflow: hidden on the card clips the glass panel during its slide animation — keep overflow on an outer wrapper or use a clip-path instead.

Browser support

ChromeSafariFirefoxEdge
76+ 9+ (prefixed) 103+ 76+

Always include -webkit-backdrop-filter alongside the unprefixed version for full Safari compatibility.

More from 20 CSS Image Hover Effects

CSS Fullscreen Background Image HoverCSS Image Hover Zoom In CardCSS Hover Reveal Text Over ImageE-Commerce Product Image Swap on HoverCSS Grid Image Blur Overlay Text HoverCSS Card Slide Up Caption on HoverCSS Grayscale to Color Image HoverCSS Image Color Overlay Tint on HoverNeumorphic Image Card Hover Effect CSSCSS Glowing Neon Border Image HoverCSS Image Clip-Path Transition HoverCSS Shining Light Glare Image Hover
View the full collection →

Search CodeFronts

Loading…

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