16 CSS Image Gallery Designs 08 / 16

CSS Metro Tile Grid Gallery

A real Windows Metro / Live Tile dashboard: start-screen chrome with username + pin count + signal/time, six bold sans-serif tiles in a 4-column grid with mixed span-1/span-2 sizing, category accent stripes on the left edge, in-tile metadata (category badge, photo count, big light-weight title, subtitle), and a live-tile flip on hover that swaps the chrome for a full metadata panel (mission, capture date, resolution, distance, telescope) with a VIEW → CTA in the accent color.

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

The code

<div class="ig-08">

  <!-- Start screen chrome -->
  <header class="ig-08__chrome">
    <div class="ig-08__chrome-l">
      <span class="ig-08__user">★ COSMOS COLLECTION</span>
      <span class="ig-08__pinned">6 tiles pinned · all sky</span>
    </div>
    <div class="ig-08__chrome-r">
      <span class="ig-08__time">14:45 · TUE</span>
      <span class="ig-08__signal">▮▮▮▯</span>
    </div>
  </header>

  <div class="ig-08__grid">

    <!-- 1 LARGE: Nebula -->
    <div class="ig-08__tile" data-cat="NEBULA" data-color="#e91e63">
      <svg viewBox="0 0 360 500" xmlns="http://www.w3.org/2000/svg" style="aspect-ratio:360/500">
        <defs>
          <radialGradient id="nb1" cx="40%" cy="45%" r="55%"><stop offset="0%" stop-color="#ff6080" stop-opacity=".9"/><stop offset="50%" stop-color="#8020e0" stop-opacity=".7"/><stop offset="100%" stop-color="#020408" stop-opacity="1"/></radialGradient>
          <radialGradient id="nb2" cx="65%" cy="55%" r="45%"><stop offset="0%" stop-color="#4080ff" stop-opacity=".8"/><stop offset="60%" stop-color="#0020a0" stop-opacity=".5"/><stop offset="100%" stop-color="#020408" stop-opacity="0"/></radialGradient>
          <filter id="nbf"><feGaussianBlur stdDeviation="12"/></filter>
          <filter id="nbf2"><feGaussianBlur stdDeviation="4"/></filter>
        </defs>
        <rect width="360" height="500" fill="#020408"/>
        <rect width="360" height="500" fill="url(#nb1)" filter="url(#nbf)"/>
        <rect width="360" height="500" fill="url(#nb2)" filter="url(#nbf)"/>
        <!-- Extra glow wisps -->
        <ellipse cx="120" cy="200" rx="100" ry="80" fill="#ff2060" opacity=".2" filter="url(#nbf)"/>
        <ellipse cx="240" cy="280" rx="90" ry="70" fill="#2040ff" opacity=".25" filter="url(#nbf)"/>
        <ellipse cx="180" cy="150" rx="60" ry="50" fill="#ff80aa" opacity=".15" filter="url(#nbf)"/>
        <!-- Dense star field -->
        <g fill="#fff">
          <circle cx="12" cy="18" r=".8" opacity=".9"/><circle cx="35" cy="8" r="1.2" opacity=".95"/><circle cx="68" cy="22" r=".9" opacity=".8"/>
          <circle cx="95" cy="10" r="1.1" opacity=".88"/><circle cx="130" cy="28" r=".8" opacity=".75"/><circle cx="162" cy="8" r="1.3" opacity=".95"/>
          <circle cx="198" cy="18" r=".9" opacity=".85"/><circle cx="230" cy="6" r="1.1" opacity=".9"/><circle cx="265" cy="24" r=".8" opacity=".78"/>
          <circle cx="298" cy="12" r="1.2" opacity=".88"/><circle cx="330" cy="20" r=".9" opacity=".82"/><circle cx="355" cy="8" r=".8" opacity=".8"/>
          <circle cx="20" cy="55" r="1" opacity=".85"/><circle cx="50" cy="48" r=".9" opacity=".8"/><circle cx="82" cy="62" r="1.1" opacity=".88"/>
          <circle cx="118" cy="50" r=".8" opacity=".75"/><circle cx="145" cy="68" r="1" opacity=".85"/><circle cx="180" cy="52" r="1.2" opacity=".9"/>
          <circle cx="215" cy="60" r=".9" opacity=".82"/><circle cx="248" cy="45" r="1.1" opacity=".88"/><circle cx="282" cy="58" r=".8" opacity=".78"/>
          <circle cx="318" cy="48" r="1" opacity=".85"/><circle cx="348" cy="65" r=".9" opacity=".8"/>
          <!-- Brighter star clusters -->
          <circle cx="80" cy="160" r="2" opacity=".95"/><circle cx="200" cy="100" r="2.2" opacity=".98"/>
          <circle cx="310" cy="200" r="1.8" opacity=".9"/><circle cx="60" cy="350" r="2" opacity=".92"/>
          <circle cx="280" cy="380" r="2.1" opacity=".95"/><circle cx="160" cy="420" r="1.8" opacity=".88"/>
          <!-- Scatter mid -->
          <circle cx="30" cy="120" r=".8"/><circle cx="70" cy="100" r=".9" opacity=".8"/><circle cx="110" cy="130" r=".8" opacity=".85"/>
          <circle cx="150" cy="110" r=".9" opacity=".8"/><circle cx="190" cy="135" r=".8" opacity=".75"/><circle cx="230" cy="115" r="1" opacity=".85"/>
          <circle cx="270" cy="125" r=".8" opacity=".82"/><circle cx="310" cy="108" r=".9" opacity=".88"/><circle cx="340" cy="130" r=".8" opacity=".78"/>
        </g>
        <!-- Dust lanes (dark) -->
        <path d="M80,180 Q140,220 180,200 Q230,175 290,210" stroke="#020408" stroke-width="18" fill="none" opacity=".5"/>
        <path d="M60,260 Q100,300 160,285 Q220,268 270,300" stroke="#020408" stroke-width="12" fill="none" opacity=".4"/>
        <!-- Bright core -->
        <circle cx="160" cy="250" r="25" fill="#ffccee" opacity=".6" filter="url(#nbf2)"/>
        <circle cx="160" cy="250" r="8" fill="#fff" opacity=".8"/>
      </svg>
      <div class="ig-08__tile-chrome">
        <div class="ig-08__tile-top">
          <span class="ig-08__cat">NEBULA</span>
          <span class="ig-08__count">12 photos</span>
        </div>
        <div class="ig-08__tile-bottom">
          <h3 class="ig-08__title">Carina<br/>Nebula</h3>
          <p class="ig-08__sub">NGC 3372 · 7,500 light-years</p>
        </div>
      </div>
      <div class="ig-08__flip">
        <p class="ig-08__flip-line"><span>Mission</span><strong>James Webb</strong></p>
        <p class="ig-08__flip-line"><span>Captured</span><strong>2022.07.12</strong></p>
        <p class="ig-08__flip-line"><span>Resolution</span><strong>4536 × 6244</strong></p>
        <p class="ig-08__flip-line"><span>Constellation</span><strong>Carina</strong></p>
        <span class="ig-08__flip-cta">VIEW ALBUM →</span>
      </div>
    </div>

    <!-- 2: Planet with rings -->
    <div class="ig-08__tile" data-cat="PLANET" data-color="#ff9800">
      <svg viewBox="0 0 180 240" xmlns="http://www.w3.org/2000/svg" style="aspect-ratio:180/240">
        <defs><radialGradient id="plg" cx="38%" cy="35%" r="62%"><stop offset="0%" stop-color="#c8a060"/><stop offset="50%" stop-color="#a87830"/><stop offset="100%" stop-color="#5a3808"/></radialGradient><filter id="plf"><feGaussianBlur stdDeviation="5"/></filter></defs>
        <rect width="180" height="240" fill="#030508"/>
        <g fill="#fff" opacity=".7"><circle cx="15" cy="12" r=".8"/><circle cx="45" cy="5" r="1"/><circle cx="90" cy="8" r=".9"/><circle cx="140" cy="14" r=".8"/><circle cx="168" cy="6" r="1.1"/><circle cx="25" cy="35" r=".9"/><circle cx="75" cy="28" r=".8"/><circle cx="125" cy="32" r="1"/><circle cx="160" cy="40" r=".8"/></g>
        <!-- Rings (behind planet) -->
        <ellipse cx="90" cy="130" rx="80" ry="22" fill="none" stroke="#c8a060" stroke-width="8" opacity=".35"/>
        <ellipse cx="90" cy="130" rx="80" ry="22" fill="none" stroke="#e0b870" stroke-width="4" opacity=".25"/>
        <!-- Planet body -->
        <circle cx="90" cy="120" r="55" fill="url(#plg)"/>
        <!-- Storm bands -->
        <g fill="none"><path d="M38,108 Q90,98 142,108" stroke="#8a5820" stroke-width="6" opacity=".5"/><path d="M36,120 Q90,112 144,120" stroke="#7a4818" stroke-width="8" opacity=".4"/><path d="M38,132 Q90,126 142,132" stroke="#8a5820" stroke-width="5" opacity=".45"/></g>
        <!-- Great storm spot -->
        <ellipse cx="110" cy="118" rx="12" ry="9" fill="#6a3810" opacity=".7"/>
        <ellipse cx="110" cy="118" rx="7" ry="5" fill="#c08040" opacity=".5"/>
        <!-- Rings (front) -->
        <ellipse cx="90" cy="130" rx="80" ry="22" fill="none" stroke="#c8a060" stroke-width="8" opacity=".25" clip-path="none"/>
        <path d="M10,140 Q90,152 170,140" stroke="#c8a060" stroke-width="8" fill="none" opacity=".3"/>
        <!-- Ring shadow on planet -->
        <ellipse cx="90" cy="130" rx="45" ry="6" fill="#3a1a08" opacity=".4"/>
        <!-- Moon -->
        <circle cx="155" cy="55" r="12" fill="#888a8c"/>
        <circle cx="158" cy="52" r="9" fill="#9a9c9e"/>
        <g fill="#6a6c6e" opacity=".7"><circle cx="152" cy="50" r="2.5"/><circle cx="160" cy="58" r="2"/><circle cx="156" cy="54" r="1.5"/></g>
      </svg>
      <div class="ig-08__tile-chrome">
        <div class="ig-08__tile-top">
          <span class="ig-08__cat">PLANET</span>
          <span class="ig-08__count">8</span>
        </div>
        <div class="ig-08__tile-bottom">
          <h3 class="ig-08__title">Saturn</h3>
          <p class="ig-08__sub">Ringed gas giant</p>
        </div>
      </div>
      <div class="ig-08__flip">
        <p class="ig-08__flip-line"><span>Mission</span><strong>Cassini</strong></p>
        <p class="ig-08__flip-line"><span>Distance</span><strong>1.4 B km</strong></p>
        <p class="ig-08__flip-line"><span>Moons</span><strong>146</strong></p>
        <span class="ig-08__flip-cta">VIEW →</span>
      </div>
    </div>

    <!-- 3: Galaxy spiral -->
    <div class="ig-08__tile" data-cat="GALAXY" data-color="#9c27b0">
      <svg viewBox="0 0 180 240" xmlns="http://www.w3.org/2000/svg" style="aspect-ratio:180/240">
        <defs><radialGradient id="glg" cx="50%" cy="50%" r="50%"><stop offset="0%" stop-color="#fff8e0" stop-opacity=".9"/><stop offset="30%" stop-color="#ffd080" stop-opacity=".7"/><stop offset="70%" stop-color="#8040c0" stop-opacity=".4"/><stop offset="100%" stop-color="#020408" stop-opacity="0"/></radialGradient><filter id="glf"><feGaussianBlur stdDeviation="6"/></filter><filter id="glf2"><feGaussianBlur stdDeviation="2"/></filter></defs>
        <rect width="180" height="240" fill="#020408"/>
        <g fill="#fff" opacity=".6"><circle cx="10" cy="10" r=".8"/><circle cx="35" cy="5" r=".9"/><circle cx="70" cy="15" r=".8"/><circle cx="110" cy="8" r="1"/><circle cx="150" cy="12" r=".8"/><circle cx="170" cy="5" r=".9"/><circle cx="20" cy="32" r=".9"/><circle cx="60" cy="28" r=".8"/><circle cx="95" cy="35" r="1"/><circle cx="135" cy="30" r=".8"/><circle cx="165" cy="38" r=".9"/></g>
        <!-- Galaxy core -->
        <ellipse cx="90" cy="120" rx="80" ry="80" fill="url(#glg)" filter="url(#glf)"/>
        <!-- Spiral arms -->
        <path d="M90,120 Q110,80 130,60 Q155,42 165,55 Q175,70 160,85 Q145,100 125,105 Q105,110 90,120" stroke="#c080ff" stroke-width="3" fill="none" opacity=".6" filter="url(#glf2)"/>
        <path d="M90,120 Q70,160 50,180 Q25,198 15,185 Q5,170 20,155 Q35,140 55,135 Q75,130 90,120" stroke="#c080ff" stroke-width="3" fill="none" opacity=".6" filter="url(#glf2)"/>
        <path d="M90,120 Q130,110 155,125 Q178,138 172,155 Q165,170 148,165 Q130,158 118,145 Q106,132 90,120" stroke="#8040ff" stroke-width="2" fill="none" opacity=".5" filter="url(#glf2)"/>
        <path d="M90,120 Q50,130 25,115 Q2,102 8,85 Q15,70 32,75 Q50,82 62,95 Q74,108 90,120" stroke="#8040ff" stroke-width="2" fill="none" opacity=".5" filter="url(#glf2)"/>
        <!-- Bright core center -->
        <circle cx="90" cy="120" r="12" fill="#fff8e0" opacity=".8" filter="url(#glf2)"/>
        <circle cx="90" cy="120" r="5" fill="#fff"/>
        <!-- Satellite galaxy -->
        <circle cx="145" cy="55" r="8" fill="#a070d0" opacity=".5" filter="url(#glf2)"/>
        <circle cx="145" cy="55" r="4" fill="#c0a0e0" opacity=".7" filter="url(#glf2)"/>
      </svg>
      <div class="ig-08__tile-chrome">
        <div class="ig-08__tile-top">
          <span class="ig-08__cat">GALAXY</span>
          <span class="ig-08__count">14</span>
        </div>
        <div class="ig-08__tile-bottom">
          <h3 class="ig-08__title">Andromeda</h3>
          <p class="ig-08__sub">M31 spiral · 2.5 M ly</p>
        </div>
      </div>
      <div class="ig-08__flip">
        <p class="ig-08__flip-line"><span>Type</span><strong>Spiral Sb</strong></p>
        <p class="ig-08__flip-line"><span>Stars</span><strong>~1 trillion</strong></p>
        <p class="ig-08__flip-line"><span>Diameter</span><strong>220,000 ly</strong></p>
        <span class="ig-08__flip-cta">VIEW →</span>
      </div>
    </div>

    <!-- 4: Aurora from space -->
    <div class="ig-08__tile" data-cat="EARTH" data-color="#00bcd4">
      <svg viewBox="0 0 180 240" xmlns="http://www.w3.org/2000/svg" style="aspect-ratio:180/240">
        <defs><radialGradient id="eag" cx="50%" cy="80%" r="60%"><stop offset="0%" stop-color="#1a3a5a"/><stop offset="50%" stop-color="#0a1a2a"/><stop offset="100%" stop-color="#020408"/></radialGradient><filter id="eaf"><feGaussianBlur stdDeviation="8"/></filter><filter id="eaf2"><feGaussianBlur stdDeviation="3"/></filter></defs>
        <rect width="180" height="240" fill="#020408"/>
        <g fill="#fff" opacity=".65"><circle cx="15" cy="18" r=".8"/><circle cx="40" cy="8" r="1"/><circle cx="80" cy="15" r=".8"/><circle cx="115" cy="6" r=".9"/><circle cx="155" cy="20" r=".8"/><circle cx="172" cy="10" r="1"/><circle cx="25" cy="40" r=".9"/><circle cx="65" cy="32" r=".8"/><circle cx="100" cy="42" r="1"/><circle cx="140" cy="35" r=".8"/><circle cx="168" cy="45" r=".9"/></g>
        <!-- Earth curve from space -->
        <path d="M0,180 Q90,155 180,178 L180,240 L0,240 Z" fill="url(#eag)"/>
        <path d="M0,185 Q90,162 180,183" stroke="#1a4a7a" stroke-width="2" fill="none" opacity=".5"/>
        <!-- Atmosphere glow edge -->
        <path d="M0,178 Q90,152 180,175" stroke="#4488cc" stroke-width="6" fill="none" opacity=".3" filter="url(#eaf2)"/>
        <!-- Aurora bands from space -->
        <g filter="url(#eaf)" opacity=".7">
          <path d="M0,140 Q45,110 90,130 Q135,148 180,125" stroke="#00ff88" stroke-width="22" fill="none"/>
          <path d="M0,158 Q50,132 95,148 Q140,163 180,142" stroke="#4040ff" stroke-width="14" fill="none"/>
          <path d="M0,125 Q40,100 85,118 Q130,135 180,112" stroke="#00e8d0" stroke-width="10" fill="none"/>
        </g>
        <!-- Space / stars above -->
        <g fill="#fff" opacity=".8"><circle cx="20" cy="65" r="1.2"/><circle cx="55" cy="58" r=".9"/><circle cx="90" cy="70" r="1.1"/><circle cx="130" cy="60" r=".9"/><circle cx="160" cy="72" r="1.2"/><circle cx="40" cy="88" r=".8"/><circle cx="78" cy="92" r="1"/><circle cx="118" cy="85" r=".9"/><circle cx="152" cy="93" r=".8"/></g>
        <!-- ISS silhouette -->
        <g transform="translate(130,85)" fill="#aaa">
          <rect x="-18" y="-2" width="36" height="4" rx="1"/>
          <rect x="-3" y="-8" width="6" height="16" rx="1"/>
          <rect x="-22" y="-1" width="8" height="2" rx="1"/>
          <rect x="14" y="-1" width="8" height="2" rx="1"/>
        </g>
      </svg>
      <div class="ig-08__tile-chrome">
        <div class="ig-08__tile-top">
          <span class="ig-08__cat">EARTH</span>
          <span class="ig-08__count">23</span>
        </div>
        <div class="ig-08__tile-bottom">
          <h3 class="ig-08__title">Aurora from Orbit</h3>
          <p class="ig-08__sub">ISS · LEO 400 km</p>
        </div>
      </div>
      <div class="ig-08__flip">
        <p class="ig-08__flip-line"><span>Captured</span><strong>2024.03.18</strong></p>
        <p class="ig-08__flip-line"><span>Crew</span><strong>Expedition 70</strong></p>
        <p class="ig-08__flip-line"><span>Altitude</span><strong>408 km</strong></p>
        <span class="ig-08__flip-cta">VIEW →</span>
      </div>
    </div>

    <!-- 5: Black hole -->
    <div class="ig-08__tile" data-cat="ANOMALY" data-color="#7c4dff">
      <svg viewBox="0 0 180 240" xmlns="http://www.w3.org/2000/svg" style="aspect-ratio:180/240">
        <defs>
          <radialGradient id="bhg" cx="50%" cy="50%" r="50%"><stop offset="0%" stop-color="#000000"/><stop offset="40%" stop-color="#080410"/><stop offset="75%" stop-color="#300a60" stop-opacity=".9"/><stop offset="100%" stop-color="#020408" stop-opacity="0"/></radialGradient>
          <radialGradient id="bhd" cx="50%" cy="50%" r="50%"><stop offset="0%" stop-color="#ff8020" stop-opacity=".8"/><stop offset="60%" stop-color="#ff4000" stop-opacity=".4"/><stop offset="100%" stop-color="#020408" stop-opacity="0"/></radialGradient>
          <filter id="bhf"><feGaussianBlur stdDeviation="6"/></filter>
          <filter id="bhf2"><feGaussianBlur stdDeviation="2"/></filter>
        </defs>
        <rect width="180" height="240" fill="#020408"/>
        <g fill="#fff" opacity=".7"><circle cx="10" cy="15" r=".9"/><circle cx="38" cy="5" r="1.1"/><circle cx="72" cy="18" r=".8"/><circle cx="108" cy="8" r="1"/><circle cx="148" cy="20" r=".9"/><circle cx="170" cy="8" r=".8"/><circle cx="25" cy="40" r=".8"/><circle cx="62" cy="32" r="1"/><circle cx="100" cy="44" r=".9"/><circle cx="138" cy="35" r=".8"/><circle cx="165" cy="48" r="1"/></g>
        <!-- Accretion disk glow -->
        <ellipse cx="90" cy="125" rx="78" ry="28" fill="url(#bhd)" filter="url(#bhf)"/>
        <ellipse cx="90" cy="118" rx="65" ry="20" fill="#ff6010" opacity=".3" filter="url(#bhf2)"/>
        <!-- Disk detail streaks -->
        <g stroke="#ffa040" stroke-width="1.5" fill="none" opacity=".5" filter="url(#bhf2)">
          <path d="M12,120 Q50,108 90,115 Q130,108 168,120"/>
          <path d="M18,128 Q55,118 90,124 Q125,118 162,128"/>
        </g>
        <!-- Event horizon -->
        <circle cx="90" cy="120" r="48" fill="url(#bhg)"/>
        <circle cx="90" cy="120" r="36" fill="#000"/>
        <circle cx="90" cy="120" r="38" fill="none" stroke="#6020a0" stroke-width="3" opacity=".3" filter="url(#bhf2)"/>
        <!-- Gravitational lensing arc -->
        <path d="M20,100 Q60,70 110,80 Q140,88 160,105" stroke="#c0a0e0" stroke-width="1.5" fill="none" opacity=".4"/>
        <path d="M22,140 Q62,165 110,162 Q140,158 162,148" stroke="#c0a0e0" stroke-width="1.5" fill="none" opacity=".3"/>
        <!-- Jet -->
        <path d="M90,82 Q88,60 90,30 Q92,10 90,0" stroke="#8040ff" stroke-width="4" fill="none" opacity=".5" filter="url(#bhf2)"/>
        <path d="M90,158 Q88,180 90,210 Q92,230 90,240" stroke="#8040ff" stroke-width="4" fill="none" opacity=".5" filter="url(#bhf2)"/>
      </svg>
      <div class="ig-08__tile-chrome">
        <div class="ig-08__tile-top">
          <span class="ig-08__cat">ANOMALY</span>
          <span class="ig-08__count">7</span>
        </div>
        <div class="ig-08__tile-bottom">
          <h3 class="ig-08__title">Black Hole</h3>
          <p class="ig-08__sub">M87* · supermassive</p>
        </div>
      </div>
      <div class="ig-08__flip">
        <p class="ig-08__flip-line"><span>Mass</span><strong>6.5 B M☉</strong></p>
        <p class="ig-08__flip-line"><span>Telescope</span><strong>Event Horizon</strong></p>
        <p class="ig-08__flip-line"><span>Distance</span><strong>55 M ly</strong></p>
        <span class="ig-08__flip-cta">VIEW →</span>
      </div>
    </div>

    <!-- 6: Comet tail -->
    <div class="ig-08__tile" data-cat="COMET" data-color="#4caf50">
      <svg viewBox="0 0 180 240" xmlns="http://www.w3.org/2000/svg" style="aspect-ratio:180/240">
        <defs><filter id="cmf"><feGaussianBlur stdDeviation="5"/></filter><filter id="cmf2"><feGaussianBlur stdDeviation="2"/></filter></defs>
        <rect width="180" height="240" fill="#020408"/>
        <g fill="#fff" opacity=".7"><circle cx="12" cy="12" r=".9"/><circle cx="40" cy="6" r=".8"/><circle cx="75" cy="18" r="1"/><circle cx="112" cy="8" r=".9"/><circle cx="148" cy="15" r=".8"/><circle cx="170" cy="5" r="1"/><circle cx="22" cy="38" r=".8"/><circle cx="58" cy="30" r="1"/><circle cx="95" cy="42" r=".9"/><circle cx="132" cy="34" r=".8"/><circle cx="165" cy="44" r="1"/><circle cx="30" cy="65" r=".9"/><circle cx="70" cy="58" r=".8"/><circle cx="108" cy="68" r="1"/><circle cx="145" cy="60" r=".9"/><circle cx="172" cy="70" r=".8"/></g>
        <!-- Comet tail glow -->
        <path d="M140,60 Q90,100 20,180 Q5,200 0,240" stroke="#88ccff" stroke-width="30" fill="none" opacity=".15" filter="url(#cmf)"/>
        <path d="M140,60 Q92,98 25,172 Q10,192 5,230" stroke="#a0ddff" stroke-width="16" fill="none" opacity=".2" filter="url(#cmf2)"/>
        <path d="M140,60 Q94,96 30,165 Q18,184 14,218" stroke="#c0eeff" stroke-width="8" fill="none" opacity=".3" filter="url(#cmf2)"/>
        <path d="M140,60 Q96,94 35,158 Q25,176 22,205" stroke="#e0f8ff" stroke-width="3" fill="none" opacity=".5"/>
        <!-- Comet nucleus glow -->
        <circle cx="140" cy="60" r="20" fill="#80ccff" opacity=".5" filter="url(#cmf)"/>
        <circle cx="140" cy="60" r="12" fill="#c0eeff" opacity=".6" filter="url(#cmf2)"/>
        <circle cx="140" cy="60" r="6" fill="#e8f8ff" opacity=".9"/>
        <circle cx="140" cy="60" r="3" fill="#fff"/>
        <!-- Ion tail (blue, faint) -->
        <path d="M138,55 Q80,70 20,60 Q8,58 0,55" stroke="#4088ff" stroke-width="2" fill="none" opacity=".3" filter="url(#cmf2)"/>
        <!-- Stars bright in path -->
        <circle cx="50" cy="100" r="1.5" fill="#fff" opacity=".9"/><circle cx="80" cy="145" r="1.2" fill="#fff" opacity=".85"/><circle cx="35" cy="195" r="1.5" fill="#fff" opacity=".9"/>
      </svg>
      <div class="ig-08__tile-chrome">
        <div class="ig-08__tile-top">
          <span class="ig-08__cat">COMET</span>
          <span class="ig-08__count">19</span>
        </div>
        <div class="ig-08__tile-bottom">
          <h3 class="ig-08__title">Halley's Comet</h3>
          <p class="ig-08__sub">Returns 2061</p>
        </div>
      </div>
      <div class="ig-08__flip">
        <p class="ig-08__flip-line"><span>Period</span><strong>76 years</strong></p>
        <p class="ig-08__flip-line"><span>Last seen</span><strong>1986</strong></p>
        <p class="ig-08__flip-line"><span>Discovered</span><strong>240 BC</strong></p>
        <span class="ig-08__flip-cta">VIEW →</span>
      </div>
    </div>

  </div>

  <footer class="ig-08__statusbar">
    <span>↑ Pin · Drag tiles to reorder</span>
    <span>HOVER ANY TILE</span>
    <span>Live tiles · 6/6 active</span>
  </footer>

</div>
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:#0a0a0e;font-family:'Segoe UI','Roboto',system-ui,sans-serif;padding:1rem;min-height:100vh;display:flex;align-items:center;justify-content:center;color:#fff}
.ig-08{width:100%;max-width:820px;background:#0a0a0e;padding:1.1rem 1.2rem 1rem;display:flex;flex-direction:column;gap:.8rem}
.ig-08__chrome{display:flex;justify-content:space-between;align-items:baseline;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;padding-bottom:.55rem;border-bottom:1px solid #1c1c24;flex-wrap:wrap;gap:.5rem}
.ig-08__chrome-l{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap}
.ig-08__user{font-size:1rem;font-weight:300;letter-spacing:.08em;color:#fff}
.ig-08__pinned{font-size:.65rem;font-weight:400;color:#7a7a8a;letter-spacing:.16em}
.ig-08__chrome-r{display:flex;gap:1rem;color:#7a7a8a;font-size:.65rem;font-weight:500;letter-spacing:.16em}
.ig-08__signal{color:#46d160;letter-spacing:.05em;font-size:.75rem}
.ig-08__grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:128px;gap:6px}
.ig-08__tile{overflow:hidden;border-radius:0;position:relative;cursor:pointer;perspective:1000px;background:#0a0a0e;outline:1px solid rgba(255,255,255,.04)}
.ig-08__tile:nth-child(1){grid-column:span 2;grid-row:span 2}
.ig-08__tile:nth-child(2){grid-column:span 2}
.ig-08__tile:nth-child(3){grid-column:span 1}
.ig-08__tile:nth-child(4){grid-column:span 1}
.ig-08__tile:nth-child(5){grid-column:span 2}
.ig-08__tile:nth-child(6){grid-column:span 2}
.ig-08__tile svg{width:100%;height:100%;display:block;transition:transform .55s cubic-bezier(.25,.46,.45,.94);position:absolute;inset:0;backface-visibility:hidden}
.ig-08__tile:hover svg{transform:scale(1.04)}
.ig-08__tile::before{content:'';position:absolute;top:0;left:0;width:4px;height:100%;background:var(--accent,#7c4dff);z-index:2;transition:width .35s ease}
.ig-08__tile:hover::before{width:6px;box-shadow:0 0 18px var(--accent,#7c4dff)}
.ig-08__tile[data-color="#e91e63"]{--accent:#e91e63}
.ig-08__tile[data-color="#ff9800"]{--accent:#ff9800}
.ig-08__tile[data-color="#9c27b0"]{--accent:#9c27b0}
.ig-08__tile[data-color="#00bcd4"]{--accent:#00bcd4}
.ig-08__tile[data-color="#7c4dff"]{--accent:#7c4dff}
.ig-08__tile[data-color="#4caf50"]{--accent:#4caf50}
.ig-08__tile-chrome{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:space-between;padding:.7rem .85rem .8rem 1.05rem;background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 50%,rgba(0,0,0,.85) 100%);transition:opacity .4s ease,transform .4s ease;backface-visibility:hidden}
.ig-08__tile:hover .ig-08__tile-chrome{opacity:0;transform:translateY(-6px)}
.ig-08__tile-top{display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem}
.ig-08__cat{font-size:.6rem;font-weight:700;letter-spacing:.18em;color:var(--accent,#fff);background:rgba(0,0,0,.4);padding:.22rem .5rem;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.ig-08__count{font-size:.62rem;font-weight:600;color:rgba(255,255,255,.85);letter-spacing:.08em;background:rgba(0,0,0,.4);padding:.22rem .5rem;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.ig-08__tile-bottom{}
.ig-08__title{font-size:1.2rem;font-weight:300;line-height:1.05;color:#fff;letter-spacing:-0.005em;margin-bottom:.25rem;text-shadow:0 1px 4px rgba(0,0,0,.65)}
.ig-08__tile:nth-child(1) .ig-08__title{font-size:1.85rem;font-weight:200}
.ig-08__sub{font-size:.66rem;color:rgba(255,255,255,.7);letter-spacing:.08em;font-weight:500;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.ig-08__flip{position:absolute;inset:0;z-index:4;background:linear-gradient(135deg,rgba(8,4,20,.96),rgba(20,4,30,.96));display:flex;flex-direction:column;justify-content:center;padding:1rem 1.1rem 1rem 1.3rem;gap:.45rem;opacity:0;transform:translateY(12px);transition:opacity .4s ease .05s,transform .4s ease .05s;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ig-08__tile:hover .ig-08__flip{opacity:1;transform:translateY(0)}
.ig-08__flip-line{display:flex;justify-content:space-between;align-items:baseline;font-size:.7rem;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:.32rem}
.ig-08__flip-line span{color:rgba(255,255,255,.55);letter-spacing:.1em;text-transform:uppercase;font-size:.58rem;font-weight:600}
.ig-08__flip-line strong{color:#fff;font-weight:600;font-size:.78rem;font-feature-settings:'tnum'}
.ig-08__flip-cta{margin-top:.5rem;font-size:.62rem;font-weight:700;letter-spacing:.2em;color:var(--accent,#fff);align-self:flex-end;cursor:pointer}
.ig-08__statusbar{display:flex;justify-content:space-between;align-items:center;font-size:.6rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#5a5a6a;padding-top:.55rem;margin-top:.2rem;border-top:1px solid #1c1c24;flex-wrap:wrap;gap:.5rem}
.ig-08__statusbar > :nth-child(2){color:var(--accent,#7c4dff);color:#7c4dff;font-weight:700}
@media(prefers-reduced-motion:reduce){.ig-08__tile svg,.ig-08__tile-chrome,.ig-08__flip,.ig-08__tile::before{transition:none}.ig-08__tile:hover svg{transform:none}}

How this works

The grid is a 4-column CSS grid with grid-auto-rows: 128px and mixed spans: hero tile claims grid-column: span 2; grid-row: span 2, two wide tiles span 2, two narrow tiles span 1 — the classic Metro asymmetric brick pattern. Tiles use border-radius: 0 (Metro is famously square) and a 1px translucent outline instead of cards-with-shadows.

Each tile has THREE stacked layers: (1) the SVG illustration absolute-positioned to fill, (2) a .ig-08__tile-chrome layer with category badge top-left + photo count top-right + huge light-weight title + subtitle bottom-left, layered over a dark vignette gradient so labels stay readable, (3) a .ig-08__flip metadata panel hidden by default. On :hover the chrome fades out + lifts translateY(-6px), and the flip panel fades in + lifts translateY(12px → 0), revealing key/value pairs (Mission, Captured, Resolution) with a colored VIEW → CTA. A ::before pseudo-element paints a 4px category-color accent stripe on the left edge that thickens to 6px + adds a box-shadow: 0 0 18px bloom on hover — the live-tile equivalent of a status indicator. Six different --accent custom properties (pink/orange/purple/cyan/violet/green) drive both the stripe and the CTA color.

Customize

  • Swap the category accent palette by editing the six .ig-08__tile[data-color] rules — try a single-brand palette (all teal) for corporate, or full primary colors for a high-energy dashboard.
  • Disable the flip-on-hover and keep just the chrome by removing the .ig-08__flip opacity/transform transition — useful when you want to keep things simpler.
  • Change the title weight from font-weight: 300 (Metro Light) to 200 (Metro Thin) on the hero .ig-08__title for a more dramatic editorial feel.
  • Tighten or loosen the grid gap from 6px to 2px for adjacent tiles, or 12px for a more relaxed Windows 10 Action Center feel.
  • Resize the row height by changing grid-auto-rows: 128px — try 160px for chunkier tablet-style tiles or 96px for a denser dashboard.

Watch out for

  • SVG aspect-ratio with preserveAspectRatio="xMidYMid slice" crops the SVG content — ensure important elements in the SVG are centered, not at the edges where they may be cut off.
  • The CSS aspect-ratio on tiles conflicts with grid-row: span 2 — the spanned tile should not have an aspect-ratio set; let the grid row heights determine its dimensions.
  • Orbitron can be slow to load from Google Fonts; always include a system monospace fallback in the font-family stack to prevent layout shift during font loading.

Browser support

ChromeSafariFirefoxEdge
57+ 10.1+ 52+ 57+

CSS Grid and aspect-ratio broadly supported in modern browsers; Orbitron font requires Google Fonts CDN.

More from 16 CSS Image Gallery Designs

CSS Magazine Layout GalleryCSS Perspective Depth Stack GalleryCSS Diagonal Slice Reveal GalleryCSS Infinite Scroll Image StripCSS Polaroid Stack GalleryCSS Mosaic Zoom GalleryCSS Glassmorphism Hover CardsCSS 3D Cube Image ViewerCSS Scattered Photos GalleryCSS Ken Burns Slideshow GalleryCSS Accordion Image GalleryCSS Masonry Image Gallery
View the full collection →

Search CodeFronts

Loading…

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