16 CSS Image Gallery Designs 12 / 16

CSS Glassmorphism Hover Cards

Four ocean-zone cards floating above a vivid sunset-aurora SVG background — the frosted-glass blur reveals the colors behind, and hover slides up an info panel with species detail and a CTA chip while sibling cards dim to focus attention.

CSS + JS MIT licensed
Live Demo Open in tab
Open in playground

The code

<div class="ig-12">
  <!-- Full bg: vivid sunset/aurora so glass blur actually has something to blur -->
  <div class="ig-12__bg">
    <svg viewBox="0 0 900 600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id="obg" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stop-color="#1b0a3a"/>
          <stop offset="50%" stop-color="#4a1066"/>
          <stop offset="100%" stop-color="#0a1a4a"/>
        </linearGradient>
        <filter id="obf" x="-20%" y="-20%" width="140%" height="140%"><feGaussianBlur stdDeviation="60"/></filter>
      </defs>
      <rect width="900" height="600" fill="url(#obg)"/>
      <!-- Big vivid blurred color blobs — the blur effect is the whole reason this demo exists -->
      <g filter="url(#obf)">
        <circle cx="160" cy="180" r="170" fill="#ff3b8a"/>
        <circle cx="720" cy="120" r="200" fill="#ffb020"/>
        <circle cx="780" cy="460" r="190" fill="#00d4ff"/>
        <circle cx="220" cy="500" r="180" fill="#a040ff"/>
        <circle cx="460" cy="300" r="160" fill="#22e0a0" opacity=".85"/>
      </g>
      <!-- Subtle drifting particles -->
      <g fill="#fff" opacity=".55"><circle cx="80" cy="120" r="1.5"/><circle cx="240" cy="80" r="1.2"/><circle cx="440" cy="60" r="1.5"/><circle cx="640" cy="90" r="1.2"/><circle cx="820" cy="140" r="1.5"/><circle cx="120" cy="400" r="1.2"/><circle cx="380" cy="460" r="1.5"/><circle cx="600" cy="490" r="1.2"/><circle cx="840" cy="350" r="1.2"/></g>
    </svg>
  </div>

  <div class="ig-12__grid">

    <!-- 1: Surface zone -->
    <div class="ig-12__card">
      <div class="ig-12__img">
        <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
          <defs><linearGradient id="szg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#4488cc"/><stop offset="50%" stop-color="#2266aa"/><stop offset="100%" stop-color="#1144aa"/></linearGradient><filter id="szf"><feGaussianBlur stdDeviation="3"/></filter></defs>
          <rect width="200" height="200" fill="url(#szg)"/>
          <!-- Sunlight from above -->
          <g opacity=".3" fill="#88ddff"><polygon points="60,0 90,0 160,200 130,200"/><polygon points="100,0 120,0 180,200 160,200"/></g>
          <!-- Surface waves -->
          <g stroke="#6ac8f8" stroke-width="1.5" fill="none" opacity=".5"><path d="M0,30 Q50,18 100,28 Q150,18 200,28"/><path d="M0,42 Q50,32 100,40 Q150,32 200,40"/></g>
          <!-- Seaweed -->
          <g stroke="#2a8a18" stroke-width="3" fill="none" stroke-linecap="round"><path d="M25,200 Q18,170 25,145 Q30,125 22,105 Q18,88 25,70"/><path d="M42,200 Q48,172 42,148 Q38,130 44,110 Q48,92 42,75"/></g>
          <g fill="#3aaa28" opacity=".7"><ellipse cx="22" cy="100" rx="10" ry="5" transform="rotate(-30,22,100)"/><ellipse cx="28" cy="120" rx="9" ry="4" transform="rotate(25,28,120)"/><ellipse cx="40" cy="108" rx="10" ry="4" transform="rotate(-20,40,108)"/></g>
          <!-- Dolphins -->
          <g transform="translate(120,80)">
            <path d="M-28,0 Q-10,-12 10,-8 Q22,-5 28,5 Q20,12 5,8 Q-10,10 -28,5 Z" fill="#3a6a9a"/>
            <path d="M28,5 Q36,2 38,-5 Q36,-8 30,-5" fill="#3a6a9a"/>
            <ellipse cx="5" cy="0" rx="6" ry="8" fill="#4a7aaa" opacity=".6"/>
            <circle cx="-18" cy="-2" r="2.5" fill="#1a1a2a"/>
          </g>
          <!-- Surface kelp forest -->
          <g stroke="#1a5a0a" stroke-width="4" fill="none" stroke-linecap="round" opacity=".6"><path d="M155,200 Q160,165 155,135 Q152,115 158,90"/><path d="M170,200 Q165,168 170,142 Q174,122 168,98"/><path d="M185,200 Q190,170 186,145 Q183,125 188,100"/></g>
          <!-- Flying fish jumping -->
          <g fill="#60aacc" transform="translate(100,35)">
            <ellipse cx="0" cy="0" rx="12" ry="4"/>
            <path d="M-8,-3 Q-16,-12 -20,-8 Q-14,-3 -8,-3 Z" fill="#60aacc"/>
            <path d="M-8,3 Q-16,10 -18,7 Q-12,3 -8,3 Z" fill="#60aacc"/>
          </g>
        </svg>
      </div>
      <div class="ig-12__info">
        <p class="ig-12__zone">Sunlight Zone</p>
        <p class="ig-12__name">Surface Waters</p>
        <p class="ig-12__depth">0 – 200m depth</p>
        <p class="ig-12__species">Dolphins · Tuna · Flying fish · Kelp forests</p>
        <span class="ig-12__cta">Explore zone →</span>
      </div>
    </div>

    <!-- 2: Coral reef -->
    <div class="ig-12__card">
      <div class="ig-12__img">
        <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
          <defs><linearGradient id="crg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#1a5588"/><stop offset="100%" stop-color="#0a2a55"/></linearGradient><filter id="crf"><feGaussianBlur stdDeviation="2"/></filter></defs>
          <rect width="200" height="200" fill="url(#crg)"/>
          <g opacity=".2" fill="#88ddff"><polygon points="70,0 90,0 150,200 130,200"/></g>
          <!-- Brain coral center -->
          <ellipse cx="100" cy="155" rx="40" ry="28" fill="#d04820"/>
          <g stroke="#a83010" stroke-width="1.2" fill="none" opacity=".7">
            <path d="M65,155 Q80,145 100,155 Q120,165 135,155"/><path d="M68,148 Q82,139 100,148 Q118,157 132,148"/><path d="M70,162 Q84,153 100,162 Q116,171 130,162"/>
          </g>
          <!-- Fan coral -->
          <g stroke="#ff2288" stroke-width="1.5" fill="none"><path d="M165,200 Q162,155 158,120 Q154,92 162,70"/><path d="M162,140 Q145,115 140,90 Q138,72 146,58"/><path d="M162,135 Q180,110 182,85 Q182,68 175,55"/><path d="M140,90 L182,85"/><path d="M143,110 L180,105"/><path d="M147,130 L177,126"/><path d="M153,150 L173,146"/></g>
          <!-- Staghorn coral -->
          <g stroke="#f0a030" stroke-width="3" fill="none" stroke-linecap="round"><line x1="20" y1="200" x2="24" y2="165"/><line x1="24" y1="165" x2="16" y2="148"/><line x1="24" y1="165" x2="32" y2="150"/><line x1="16" y1="148" x2="10" y2="132"/><line x1="16" y1="148" x2="22" y2="135"/><line x1="32" y1="150" x2="28" y2="133"/><line x1="32" y1="150" x2="40" y2="136"/><line x1="35" y1="200" x2="40" y2="168"/><line x1="40" y1="168" x2="33" y2="152"/><line x1="40" y1="168" x2="48" y2="155"/></g>
          <!-- Clownfish among anemone -->
          <g transform="translate(80,125)">
            <ellipse cx="0" cy="0" rx="10" ry="6" fill="#ff6600"/>
            <line x1="-6" y1="-6" x2="-6" y2="6" stroke="#fff" stroke-width="2"/>
            <line x1="0" y1="-6" x2="0" y2="6" stroke="#fff" stroke-width="2"/>
            <polygon points="10,0 17,-5 17,5" fill="#ff6600"/>
            <circle cx="-7" cy="-1" r="2" fill="#1a1a14"/>
          </g>
          <!-- Sea anemone -->
          <g transform="translate(110,165)">
            <ellipse cx="0" cy="5" rx="12" ry="7" fill="#3a0a5a"/>
            <g stroke="#cc44ff" stroke-width="1.5" fill="none" stroke-linecap="round"><path d="M-8,2 Q-12,-8 -10,-18"/><path d="M-3,1 Q-4,-10 -2,-20"/><path d="M2,0 Q4,-12 5,-22"/><path d="M7,1 Q10,-8 12,-18"/></g>
          </g>
          <!-- Light caustics -->
          <g stroke="#88c8ff" stroke-width="1" fill="none" opacity=".25"><ellipse cx="80" cy="35" rx="18" ry="8" transform="rotate(-20,80,35)"/><ellipse cx="140" cy="28" rx="14" ry="6" transform="rotate(15,140,28)"/></g>
        </svg>
      </div>
      <div class="ig-12__info">
        <p class="ig-12__zone">Twilight Edge</p>
        <p class="ig-12__name">Coral Reef</p>
        <p class="ig-12__depth">40 – 150m depth</p>
        <p class="ig-12__species">Clownfish · Sea anemone · Brain coral · Fan coral</p>
        <span class="ig-12__cta">Explore zone →</span>
      </div>
    </div>

    <!-- 3: Twilight zone -->
    <div class="ig-12__card">
      <div class="ig-12__img">
        <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
          <defs><radialGradient id="tzg" cx="50%" cy="50%" r="60%"><stop offset="0%" stop-color="#0a1a35"/><stop offset="100%" stop-color="#040a18"/></radialGradient><filter id="tzf"><feGaussianBlur stdDeviation="3"/></filter></defs>
          <rect width="200" height="200" fill="url(#tzg)"/>
          <!-- Faint light from above -->
          <g opacity=".1" fill="#88aaff"><polygon points="70,0 90,0 140,200 120,200"/></g>
          <!-- Siphonophore (chain organism) -->
          <g stroke="#00ffaa" stroke-width="1.5" fill="none" opacity=".7"><path d="M100,0 Q95,40 102,80 Q97,120 104,160 Q99,180 100,200"/></g>
          <g fill="#00ffaa" opacity=".6" filter="url(#tzf)"><circle cx="100" cy="15" r="5"/><circle cx="97" cy="35" r="4"/><circle cx="102" cy="55" r="5"/><circle cx="99" cy="75" r="4"/><circle cx="103" cy="95" r="5"/><circle cx="100" cy="115" r="4"/><circle cx="103" cy="135" r="5"/><circle cx="100" cy="155" r="4"/><circle cx="101" cy="175" r="4"/></g>
          <!-- Bioluminescent squid -->
          <g transform="translate(48,90)">
            <path d="M-5,-20 Q-8,-5 -12,5 Q-8,15 0,18 Q8,15 12,5 Q8,-5 5,-20 Z" fill="#1a2a4a"/>
            <ellipse cx="0" cy="0" rx="12" ry="18" fill="#1a2a50" opacity=".8"/>
            <g stroke="#4488ff" stroke-width="1" fill="none" opacity=".7"><path d="M-10,10 Q-20,15 -25,10"/><path d="M-8,14 Q-18,22 -20,16"/><path d="M10,10 Q20,15 25,10"/><path d="M8,14 Q18,22 20,16"/></g>
            <g fill="#4488ff" opacity=".5" filter="url(#tzf)"><circle cx="-5" cy="0" r="3"/><circle cx="5" cy="0" r="3"/><circle cx="0" cy="8" r="4"/><circle cx="-8" cy="5" r="2"/><circle cx="8" cy="5" r="2"/></g>
            <circle cx="-5" cy="-5" r="3.5" fill="#0a0a1a"/><circle cx="-4" cy="-6" r="1.2" fill="#4488ff" opacity=".8"/>
            <circle cx="5" cy="-5" r="3.5" fill="#0a0a1a"/><circle cx="6" cy="-6" r="1.2" fill="#4488ff" opacity=".8"/>
          </g>
          <!-- Deep sea shrimp -->
          <g fill="#ff4488" opacity=".7" transform="translate(150,130)">
            <ellipse cx="0" cy="0" rx="8" ry="4"/>
            <g stroke="#ff4488" stroke-width="1" fill="none"><path d="M-8,0 Q-14,-4 -16,-8"/><path d="M-8,0 Q-14,2 -16,6"/><path d="M-4,-3 Q-8,-8 -8,-12"/><path d="M8,0 Q14,-2 16,-6"/><path d="M8,0 Q14,2 16,6"/></g>
            <path d="M8,0 Q14,2 18,0 Q22,-2 20,-6 Q18,-2 14,-1" fill="#ff4488"/>
          </g>
          <!-- Particles -->
          <g fill="#88aaff" opacity=".4"><circle cx="30" cy="50" r="1.5"/><circle cx="80" cy="30" r="1.2"/><circle cx="160" cy="65" r="1.5"/><circle cx="170" cy="40" r="1.2"/><circle cx="20" cy="140" r="1.5"/><circle cx="170" cy="160" r="1.2"/></g>
        </svg>
      </div>
      <div class="ig-12__info">
        <p class="ig-12__zone">Midnight Zone</p>
        <p class="ig-12__name">Twilight Waters</p>
        <p class="ig-12__depth">200 – 1000m depth</p>
        <p class="ig-12__species">Bioluminescent squid · Siphonophore · Deep shrimp</p>
        <span class="ig-12__cta">Explore zone →</span>
      </div>
    </div>

    <!-- 4: Abyss zone -->
    <div class="ig-12__card">
      <div class="ig-12__img">
        <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
          <defs><radialGradient id="azg" cx="50%" cy="50%" r="50%"><stop offset="0%" stop-color="#080418"/><stop offset="100%" stop-color="#020208"/></radialGradient><filter id="azf"><feGaussianBlur stdDeviation="4"/></filter><filter id="azf2"><feGaussianBlur stdDeviation="2"/></filter></defs>
          <rect width="200" height="200" fill="url(#azg)"/>
          <!-- Anglerfish -->
          <g transform="translate(105,100)">
            <!-- Body -->
            <ellipse cx="0" cy="5" rx="35" ry="22" fill="#0d1528"/>
            <!-- Belly slightly lighter -->
            <ellipse cx="5" cy="12" rx="20" ry="12" fill="#1a2540" opacity=".6"/>
            <!-- Lure -->
            <path d="M0,-17 Q5,-35 8,-50" stroke="#2a3a4a" stroke-width="2" fill="none"/>
            <circle cx="8" cy="-50" r="8" fill="#00ff88" filter="url(#azf)"/>
            <circle cx="8" cy="-50" r="4" fill="#80ffcc"/>
            <!-- Teeth rows -->
            <g fill="#c8d0d8">
              <polygon points="-28,0 -24,-8 -20,0"/><polygon points="-18,-2 -14,-10 -10,-2"/>
              <polygon points="-5,-3 -1,-11 3,-3"/><polygon points="8,-1 12,-9 16,-1"/>
              <polygon points="20,2 24,-6 28,2"/>
              <!-- Lower jaw -->
              <polygon points="-25,10 -21,18 -17,10"/><polygon points="-12,8 -8,16 -4,8"/>
              <polygon points="0,7 4,15 8,7"/><polygon points="13,8 17,16 21,8"/>
            </g>
            <!-- Eyes -->
            <circle cx="-20" cy="-3" r="6" fill="#080818"/><circle cx="-19" cy="-4" r="2" fill="#0a8a60" opacity=".7"/>
            <!-- Tail fin -->
            <path d="M35,5 Q48,-8 52,-5 Q48,5 52,16 Q48,12 35,5 Z" fill="#0d1528"/>
            <!-- Pectoral fins -->
            <ellipse cx="-15" cy="20" rx="18" ry="7" fill="#0d1528" transform="rotate(25,-15,20)"/>
          </g>
          <!-- Viper fish below -->
          <g transform="translate(50,165)" fill="#0a1020">
            <ellipse cx="0" cy="0" rx="22" ry="7"/>
            <g fill="#8888aa" opacity=".5"><polygon points="-20,-4 -16,-12 -12,-4"/><polygon points="-10,-5 -6,-13 -2,-5"/><polygon points="2,-4 6,-12 10,-4"/><polygon points="14,-3 18,-11 22,-3"/></g>
            <circle cx="-15" cy="-2" r="3" fill="#050510"/><circle cx="-14" cy="-3" r="1" fill="#0044ff" opacity=".8"/>
            <path d="M22,0 Q32,-5 36,-8 Q32,-2 36,5 Q32,3 22,0 Z" fill="#0a1020"/>
          </g>
          <!-- Particles drifting -->
          <g fill="#6080ff" opacity=".3"><circle cx="20" cy="30" r="1.5"/><circle cx="60" cy="18" r="1.2"/><circle cx="140" cy="45" r="1.5"/><circle cx="175" cy="25" r="1.2"/><circle cx="15" cy="120" r="1.5"/><circle cx="180" cy="145" r="1.2"/><circle cx="25" cy="185" r="1.5"/></g>
          <!-- Sea floor rubble -->
          <g fill="#0a0a18" opacity=".8"><ellipse cx="30" cy="192" rx="18" ry="8"/><ellipse cx="80" cy="195" rx="15" ry="7"/><ellipse cx="150" cy="190" rx="22" ry="9"/><ellipse cx="190" cy="194" rx="14" ry="7"/></g>
        </svg>
      </div>
      <div class="ig-12__info">
        <p class="ig-12__zone">Abyssal Zone</p>
        <p class="ig-12__name">Deep Abyss</p>
        <p class="ig-12__depth">1000 – 4000m depth</p>
        <p class="ig-12__species">Anglerfish · Viper fish · Sea floor rubble</p>
        <span class="ig-12__cta">Explore zone →</span>
      </div>
    </div>

  </div>
</div>
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{font-family:'DM Sans',sans-serif;min-height:100vh;padding:2rem;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#0a0418}
.ig-12{position:relative;width:100%;max-width:780px;perspective:1200px}
.ig-12__bg{position:absolute;inset:-60px;z-index:0;border-radius:24px;overflow:hidden}
.ig-12__bg svg{width:100%;height:100%;display:block}
.ig-12__grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1.1rem;padding:.4rem}
.ig-12__card{position:relative;border-radius:18px;overflow:hidden;cursor:pointer;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);transition:transform .45s cubic-bezier(.25,.8,.3,1),filter .35s ease,box-shadow .45s ease,border-color .35s ease;box-shadow:0 8px 28px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.18);transform-style:preserve-3d;aspect-ratio:3/4}
.ig-12__grid:hover .ig-12__card:not(:hover){filter:brightness(.55) saturate(.7);transform:scale(.97)}
.ig-12__card:hover{transform:translateY(-12px) rotateX(2deg) scale(1.04);border-color:rgba(255,255,255,.45);box-shadow:0 26px 60px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.15),inset 0 1px 0 rgba(255,255,255,.35)}
.ig-12__img{position:absolute;inset:0;width:100%;height:100%;display:block}
.ig-12__img svg{width:100%;height:100%;display:block}
.ig-12__info{position:absolute;left:0;right:0;bottom:0;padding:1rem 1.05rem 1.05rem;background:linear-gradient(to top,rgba(8,4,24,.92) 0%,rgba(8,4,24,.65) 55%,rgba(8,4,24,0) 100%);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transform:translateY(calc(100% - 78px));transition:transform .45s cubic-bezier(.25,.8,.3,1)}
.ig-12__card:hover .ig-12__info{transform:translateY(0)}
.ig-12__zone{font-size:.58rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#a8e0ff;margin-bottom:.3rem;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.ig-12__name{font-size:1rem;font-weight:700;color:#fff;line-height:1.2;text-shadow:0 1px 4px rgba(0,0,0,.55)}
.ig-12__depth{font-size:.72rem;color:rgba(255,255,255,.7);margin-top:.25rem}
.ig-12__species{font-size:.68rem;color:rgba(255,255,255,.75);margin-top:.55rem;line-height:1.35;opacity:0;transform:translateY(6px);transition:opacity .35s ease .12s,transform .35s ease .12s}
.ig-12__card:hover .ig-12__species{opacity:1;transform:translateY(0)}
.ig-12__cta{display:inline-block;margin-top:.65rem;padding:.32rem .65rem;font-size:.65rem;font-weight:600;letter-spacing:.06em;color:#fff;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);border-radius:999px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transform:translateY(6px);transition:opacity .35s ease .2s,transform .35s ease .2s,background .25s ease}
.ig-12__card:hover .ig-12__cta{opacity:1;transform:translateY(0)}
.ig-12__cta:hover{background:rgba(255,255,255,.3)}
@media(prefers-reduced-motion:reduce){.ig-12__card,.ig-12__info,.ig-12__species,.ig-12__cta{transition:none}.ig-12__grid:hover .ig-12__card:not(:hover){transform:none}.ig-12__card:hover{transform:none}}

How this works

The glassmorphism effect is achieved with background: rgba(255,255,255,.08) + backdrop-filter: blur(14px) saturate(160%) + border: 1px solid rgba(255,255,255,.22) on each card. The vivid blurred-blob SVG sits behind all cards (z-index: 0) so the blur has something rich to blur — without colorful content behind the glass, the effect is invisible.

The hover-reveal info panel uses position: absolute at the card bottom with transform: translateY(calc(100% - 78px)) as its rest state — only the zone label + name peek above the bottom edge. On :hover, the panel slides to translateY(0), revealing the depth, species list (staggered opacity + translateY with 120ms delay), and a frosted-glass CTA chip (200ms delay). A .ig-12__grid:hover .ig-12__card:not(:hover) sibling-selector simultaneously dims and scales-down the other cards via filter: brightness(.55) saturate(.7) + scale(.97), making the focused card pop.

Customize

  • Adjust blur intensity by changing blur(14px) saturate(160%) on backdrop-filter — values between 8px and 22px give a range from subtle frost to heavy glass; raising saturate to 200% intensifies the colors behind the glass.
  • Change glass tint from white to colored: background: rgba(80,160,220,.12) for a cool blue glass, or rgba(255,200,140,.12) for a warm amber glass.
  • Adjust how much of the info panel peeks at rest — change translateY(calc(100% - 78px)) to calc(100% - 100px) for more title visible, or calc(100% - 50px) for a more dramatic reveal.
  • Tune the sibling-dim intensity by editing filter: brightness(.55) saturate(.7) on .ig-12__grid:hover .ig-12__card:not(:hover) — increase brightness to .7 for a subtler focus.
  • Disable the 3D tilt by removing rotateX(2deg) from the hover transform — useful if you want a flat lift without perspective.

Watch out for

  • backdrop-filter only blurs what is rendered behind the element in the same stacking context — the background SVG must be a sibling below the cards, not a parent of them, or the blur will not work.
  • On Firefox, backdrop-filter is behind a flag until Firefox 103 — always provide a solid fallback background for browsers that do not support it.
  • Combining backdrop-filter with overflow: hidden on the same element can cause visual glitches in some Safari versions — apply overflow on an inner wrapper instead.

Browser support

ChromeSafariFirefoxEdge
76+ 9+ 103+ 76+

backdrop-filter requires Chrome 76+, Safari 9+ (prefixed), Firefox 103+. Always include a solid fallback background.

More from 16 CSS Image Gallery Designs

CSS Mosaic Zoom GalleryCSS 3D Cube Image ViewerCSS Scattered Photos GalleryCSS Ken Burns Slideshow GalleryCSS Accordion Image GalleryCSS Masonry Image GalleryCSS Lightbox Gallery OverlayCSS Tilt Parallax Image CardsCSS Filmstrip Carousel GalleryCSS Metro Tile Grid GalleryCSS Magazine Layout GalleryCSS Perspective Depth Stack Gallery
View the full collection →

Search CodeFronts

Loading…

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