22 CSS Image Galleries14 / 22

Pure CSSMIT licensed

CSS Glassmorphism Hover Cards

Frosted-glass image cards floating over a vivid backdrop, each lifting and brightening its blur as you hover — the glassmorphism gallery look SaaS, music and Web3 sites search for. Powered by backdrop-filter.

Published Updated

Live Demo
Try it

The code

<section class="gl-11" aria-label="Glassmorphism hover cards gallery">
  <div class="gl-11__row">
    <article class="gl-11__card"><div class="gl-11__well"><img src="https://loremflickr.com/400/400/sunset,tropical?lock=1101" alt="Tropical sunset" loading="lazy" decoding="async"></div><h3>Golden Hour</h3><p>Maldives · 2025</p></article>
    <article class="gl-11__card"><div class="gl-11__well"><img src="https://loremflickr.com/400/400/aurora,sky?lock=1102" alt="Northern lights" loading="lazy" decoding="async"></div><h3>Aurora</h3><p>Tromsø · 2025</p></article>
    <article class="gl-11__card"><div class="gl-11__well"><img src="https://loremflickr.com/400/400/canyon,red?lock=1103" alt="Red canyon" loading="lazy" decoding="async"></div><h3>Red Rock</h3><p>Arizona · 2024</p></article>
  </div>
</section>
.gl-11,
.gl-11 *,
.gl-11 *::before,
.gl-11 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.gl-11 ::selection {
  background: rgba(255,255,255,.85);
  color: #2a1a4a;
}

.gl-11 {
  font-family: 'Segoe UI',system-ui,sans-serif;
  width: 100%;
  min-height: 100vh;
  padding: 40px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(45% 55% at 12% 20%,oklch(0.72 0.2 25 / .95),transparent 60%), radial-gradient(45% 55% at 88% 25%,oklch(0.72 0.2 280 / .95),transparent 60%), radial-gradient(55% 65% at 55% 95%,oklch(0.76 0.19 190 / .9),transparent 60%), linear-gradient(135deg,#2a1550,#0e1230);
}

.gl-11__row {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  justify-content: center;
  width: min(900px,100%);
}

.gl-11__card {
  position: relative;
  width: 250px;
  padding: 16px;
  border-radius: 22px;
  background: rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 24px 50px -26px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform .4s,box-shadow .4s,border-color .4s;
}

.gl-11__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 14%;
  right: 14%;
  height: 1px;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);
}

.gl-11__card:hover {
  transform: translateY(-8px);
  border-color: rgba(255,255,255,.5);
  box-shadow: 0 36px 64px -26px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.55);
}

.gl-11__well {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.1);
}

.gl-11__well img {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}

.gl-11__card h3 {
  margin-top: 14px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,.25);
}

.gl-11__card p {
  margin-top: 2px;
  font-size: 13px;
  color: rgba(255,255,255,.82);
}

@media (prefers-reduced-motion: reduce) {
  .gl-11__card {
    transition: none;
  }
}
/* No JavaScript — backdrop-filter frosts the gradient scene; hover lifts the glass. */
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 Image Gallerie 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: CSS Glassmorphism Hover Cards
Source: https://codefronts.com/snippets/css-image-gallery/css-glassmorphism-hover-cards/

Frosted-glass image cards floating over a vivid backdrop, each lifting and brightening its blur as you hover — the glassmorphism gallery look SaaS, music and Web3 sites search for. Powered by backdrop-filter.
## HTML
```html
<section class="gl-11" aria-label="Glassmorphism hover cards gallery">
  <div class="gl-11__row">
    <article class="gl-11__card"><div class="gl-11__well"><img src="https://loremflickr.com/400/400/sunset,tropical?lock=1101" alt="Tropical sunset" loading="lazy" decoding="async"></div><h3>Golden Hour</h3><p>Maldives · 2025</p></article>
    <article class="gl-11__card"><div class="gl-11__well"><img src="https://loremflickr.com/400/400/aurora,sky?lock=1102" alt="Northern lights" loading="lazy" decoding="async"></div><h3>Aurora</h3><p>Tromsø · 2025</p></article>
    <article class="gl-11__card"><div class="gl-11__well"><img src="https://loremflickr.com/400/400/canyon,red?lock=1103" alt="Red canyon" loading="lazy" decoding="async"></div><h3>Red Rock</h3><p>Arizona · 2024</p></article>
  </div>
</section>
```
## CSS
```css
.gl-11,
.gl-11 *,
.gl-11 *::before,
.gl-11 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.gl-11 ::selection {
  background: rgba(255,255,255,.85);
  color: #2a1a4a;
}

.gl-11 {
  font-family: 'Segoe UI',system-ui,sans-serif;
  width: 100%;
  min-height: 100vh;
  padding: 40px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(45% 55% at 12% 20%,oklch(0.72 0.2 25 / .95),transparent 60%), radial-gradient(45% 55% at 88% 25%,oklch(0.72 0.2 280 / .95),transparent 60%), radial-gradient(55% 65% at 55% 95%,oklch(0.76 0.19 190 / .9),transparent 60%), linear-gradient(135deg,#2a1550,#0e1230);
}

.gl-11__row {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  justify-content: center;
  width: min(900px,100%);
}

.gl-11__card {
  position: relative;
  width: 250px;
  padding: 16px;
  border-radius: 22px;
  background: rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 24px 50px -26px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform .4s,box-shadow .4s,border-color .4s;
}

.gl-11__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 14%;
  right: 14%;
  height: 1px;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);
}

.gl-11__card:hover {
  transform: translateY(-8px);
  border-color: rgba(255,255,255,.5);
  box-shadow: 0 36px 64px -26px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.55);
}

.gl-11__well {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.1);
}

.gl-11__well img {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}

.gl-11__card h3 {
  margin-top: 14px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,.25);
}

.gl-11__card p {
  margin-top: 2px;
  font-size: 13px;
  color: rgba(255,255,255,.82);
}

@media (prefers-reduced-motion: reduce) {
  .gl-11__card {
    transition: none;
  }
}
```

## JavaScript
```js
/* No JavaScript — backdrop-filter frosts the gradient scene; hover lifts the glass. */
```

How this works

The cards sit over a colourful gradient scene. Each card uses backdrop-filter: blur() saturate() to frost whatever shows through its translucent white fill, with a fine light border and a top-edge highlight selling the pane-of-glass look. A thumbnail image sits in a glass well with its own subtle frost.

On hover the card lifts (translateY), the border brightens and the shadow deepens, so the glass appears to drift toward the viewer — all via transform/opacity, keeping it smooth.

Make it yours

  • Tune frost with the blur() radius and the fill alpha — more of both reads as thicker glass.
  • Recolour the backdrop scene; glass takes its mood from what's behind it.
  • Adjust the top-highlight and border alpha for crisper or softer edges.
  • Change the hover lift distance for a stronger or calmer float.

Gotchas — read before shipping

  • backdrop-filter needs content behind it to blur — over a flat colour the effect vanishes; keep the gradient scene.
  • Include the -webkit-backdrop-filter prefix for Safari and a translucent solid fallback where it's unsupported.
  • Text on glass is contrast-fragile — keep captions bold and dark enough to survive any backdrop colour.

Browser support

ChromeSafariFirefoxEdge
111+15.4+113+111+

Floor set by oklch(), backdrop-filter as this demo is written. The core technique itself goes back further — Chrome 76+.

backdrop-filter needs -webkit- in Safari; unsupported engines fall back to a solid translucent card.

Techniques used in this demo

decoding="async"MDN ↗loading="lazy"MDN ↗aspect-ratioMDN ↗backdrop-filterMDN ↗radial-gradient()MDN ↗oklch()MDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →