16 CSS Image Gallery Designs 06 / 16

CSS Filmstrip Carousel Gallery

A horizontally scrollable filmstrip of vintage-era illustrated frames with sprocket-hole styling and snap scrolling — pure CSS.

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

The code

<div class="ig-06">
  <div class="ig-06__reel">
    <div class="ig-06__strip">
      <!-- Frame 1: 1950s diner -->
      <div class="ig-06__frame">
        <div class="ig-06__img">
          <svg viewBox="0 0 310 175" xmlns="http://www.w3.org/2000/svg">
            <defs><filter id="grain"><feTurbulence type="fractalNoise" baseFrequency=".65" numOctaves="3" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/><feBlend mode="multiply" in="SourceGraphic"/><feComposite in2="SourceGraphic"/></filter></defs>
            <!-- Sepia tones for vintage feel -->
            <rect width="310" height="175" fill="#c8a870"/>
            <rect width="310" height="175" fill="#8a6030" opacity=".3"/>
            <!-- Diner counter -->
            <rect x="0" y="100" width="310" height="75" fill="#8a5a28"/>
            <rect x="0" y="100" width="310" height="12" fill="#c8a060"/>
            <!-- Bar stools -->
            <g fill="#4a2810">
              <circle cx="45" cy="102" r="16"/><rect x="37" y="118" width="4" height="30" rx="2"/><rect x="47" y="118" width="4" height="30" rx="2"/>
              <circle cx="110" cy="102" r="16"/><rect x="102" y="118" width="4" height="30" rx="2"/><rect x="112" y="118" width="4" height="30" rx="2"/>
              <circle cx="175" cy="102" r="16"/><rect x="167" y="118" width="4" height="30" rx="2"/><rect x="177" y="118" width="4" height="30" rx="2"/>
              <circle cx="240" cy="102" r="16"/><rect x="232" y="118" width="4" height="30" rx="2"/><rect x="242" y="118" width="4" height="30" rx="2"/>
            </g>
            <!-- Milkshake glasses on counter -->
            <g fill="#e8d0a0">
              <path d="M60,80 Q65,60 70,80 L72,102 L58,102 Z"/>
              <path d="M130,75 Q136,55 141,75 L143,102 L128,102 Z"/>
            </g>
            <!-- Jukebox -->
            <g fill="#c84020">
              <rect x="262" y="60" width="40" height="80" rx="4"/>
              <rect x="266" y="64" width="32" height="25" rx="2" fill="#c0d8f0" opacity=".7"/>
              <g fill="#ffdd00"><circle cx="282" cy="108" r="4"/><circle cx="282" cy="120" r="4"/><circle cx="282" cy="132" r="4"/></g>
              <g stroke="#ffdd00" stroke-width="1" fill="none">
                <path d="M268,98 Q282,90 296,98"/><path d="M268,103 Q282,96 296,103"/>
              </g>
            </g>
            <!-- Neon sign -->
            <g>
              <text x="20" y="55" font-family="serif" font-size="20" fill="#e03020" opacity=".9" font-weight="bold">PAT'S DINER</text>
              <rect x="15" y="38" width="180" height="25" rx="4" fill="none" stroke="#e03020" stroke-width="1.5" opacity=".6"/>
            </g>
            <!-- Ceiling lights -->
            <g fill="#fff0a0" opacity=".7">
              <circle cx="60" cy="20" r="6"/><line x1="60" y1="0" x2="60" y2="14" stroke="#8a6030" stroke-width="2"/>
              <circle cx="155" cy="20" r="6"/><line x1="155" y1="0" x2="155" y2="14" stroke="#8a6030" stroke-width="2"/>
              <circle cx="250" cy="20" r="6"/><line x1="250" y1="0" x2="250" y2="14" stroke="#8a6030" stroke-width="2"/>
            </g>
            <!-- Film grain overlay -->
            <rect width="310" height="175" fill="#8a6030" opacity=".08" filter="url(#grain)"/>
          </svg>
        </div>
        <span class="ig-06__title">PAT'S DINER — Chicago, 1955</span>
      </div>
      <!-- Frame 2: Route 66 road -->
      <div class="ig-06__frame">
        <div class="ig-06__img">
          <svg viewBox="0 0 310 175" xmlns="http://www.w3.org/2000/svg">
            <defs><linearGradient id="r66g" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#e8d0a0"/><stop offset="50%" stop-color="#d4a840"/><stop offset="100%" stop-color="#8a5010"/></linearGradient></defs>
            <rect width="310" height="175" fill="url(#r66g)"/>
            <!-- Vast desert sky -->
            <rect width="310" height="90" fill="#c8b898" opacity=".5"/>
            <!-- Road vanishing perspective -->
            <polygon points="145,90 165,90 310,175 0,175" fill="#5a5048"/>
            <polygon points="150,90 160,90 260,175 50,175" fill="#6a6058"/>
            <!-- Road lines center dashes -->
            <g fill="#e8e0c0" opacity=".7">
              <polygon points="152,100 158,100 155,112 149,112"/><polygon points="151,118 157,118 153,132 147,132"/>
              <polygon points="148,140 155,140 150,158 143,158"/>
            </g>
            <!-- Desert horizon -->
            <path d="M0,88 Q78,80 155,86 Q232,80 310,84 L310,90 L0,90 Z" fill="#b89868" opacity=".5"/>
            <!-- Mesa/buttes silhouette -->
            <g fill="#7a4820" opacity=".8">
              <polygon points="0,88 0,50 30,42 55,55 70,30 85,48 100,88"/>
              <polygon points="220,88 230,45 248,38 265,50 285,32 305,48 310,88"/>
            </g>
            <!-- Saguaro cacti -->
            <g fill="#3a6a18" opacity=".8">
              <g transform="translate(115,58)">
                <rect x="-3" y="-28" width="6" height="28" rx="3"/>
                <rect x="-10" y="-18" width="14" height="5" rx="2.5"/>
                <rect x="-14" y="-22" width="5" height="12" rx="2.5"/>
                <rect x="3" y="-15" width="14" height="5" rx="2.5"/>
                <rect x="9" y="-20" width="5" height="12" rx="2.5"/>
              </g>
              <g transform="translate(200,62)">
                <rect x="-2.5" y="-24" width="5" height="24" rx="2.5"/>
                <rect x="-8" y="-16" width="12" height="4" rx="2"/>
                <rect x="-11" y="-20" width="4" height="9" rx="2"/>
                <rect x="3" y="-12" width="12" height="4" rx="2"/>
                <rect x="7" y="-16" width="4" height="9" rx="2"/>
              </g>
            </g>
            <!-- Road sign -->
            <g transform="translate(40,45)">
              <rect x="0" y="0" width="32" height="32" rx="4" fill="#1a44aa"/>
              <text x="4" y="14" font-family="sans-serif" font-size="7" fill="#fff" font-weight="bold">ROUTE</text>
              <text x="6" y="26" font-family="sans-serif" font-size="12" fill="#fff" font-weight="bold">66</text>
              <rect x="-2" y="-2" width="36" height="36" rx="5" fill="none" stroke="#fff" stroke-width="2"/>
              <rect x="14" y="32" width="4" height="25" fill="#888"/>
            </g>
            <!-- Classic car silhouette -->
            <g fill="#1a1610" transform="translate(185,128)">
              <rect x="-35" y="-12" width="70" height="20" rx="6"/>
              <path d="M-28,-12 Q-20,-28 -5,-28 Q10,-28 18,-12 Z" fill="#1a1610"/>
              <path d="M-25,-12 Q-18,-24 -4,-24 Q9,-24 16,-12 Z" fill="#2a2620" opacity=".5"/>
              <circle cx="-22" cy="10" r="8" fill="#0a0a0a"/><circle cx="-22" cy="10" r="5" fill="#555"/>
              <circle cx="22" cy="10" r="8" fill="#0a0a0a"/><circle cx="22" cy="10" r="5" fill="#555"/>
              <circle cx="-22" cy="10" r="2.5" fill="#888"/>
              <circle cx="22" cy="10" r="2.5" fill="#888"/>
            </g>
          </svg>
        </div>
        <span class="ig-06__title">ROUTE 66 — Arizona, 1962</span>
      </div>
      <!-- Frame 3: Parisian café -->
      <div class="ig-06__frame">
        <div class="ig-06__img">
          <svg viewBox="0 0 310 175" xmlns="http://www.w3.org/2000/svg">
            <rect width="310" height="175" fill="#2a1a0a"/>
            <!-- Stone building facade -->
            <rect width="310" height="175" fill="#c8b898" opacity=".15"/>
            <!-- Awning -->
            <polygon points="0,0 310,0 310,55 0,55" fill="#c82020"/>
            <g fill="#e03030">
              <polygon points="0,55 25,38 50,55"/><polygon points="50,55 75,38 100,55"/>
              <polygon points="100,55 125,38 150,55"/><polygon points="150,55 175,38 200,55"/>
              <polygon points="200,55 225,38 250,55"/><polygon points="250,55 275,38 300,55"/>
            </g>
            <!-- Café sign -->
            <text x="60" y="30" font-family="serif" font-size="22" fill="#fff8e0" font-style="italic">Café de Flore</text>
            <!-- Building limestone blocks -->
            <g fill="none" stroke="#a89060" stroke-width=".8" opacity=".4">
              <line x1="0" y1="70" x2="310" y2="70"/><line x1="0" y1="90" x2="310" y2="90"/>
              <line x1="0" y1="110" x2="310" y2="110"/><line x1="0" y1="130" x2="310" y2="130"/>
              <line x1="55" y1="55" x2="55" y2="175"/><line x1="110" y1="55" x2="110" y2="175"/>
              <line x1="165" y1="55" x2="165" y2="175"/><line x1="220" y1="55" x2="220" y2="175"/>
              <line x1="265" y1="55" x2="265" y2="175"/>
            </g>
            <!-- Windows with shutters -->
            <g>
              <rect x="20" y="72" width="32" height="38" rx="2" fill="#6888aa" opacity=".7"/>
              <rect x="18" y="72" width="7" height="38" rx="1" fill="#4a3a18" opacity=".8"/>
              <rect x="47" y="72" width="7" height="38" rx="1" fill="#4a3a18" opacity=".8"/>
              <rect x="125" y="72" width="32" height="38" rx="2" fill="#6888aa" opacity=".7"/>
              <rect x="123" y="72" width="7" height="38" rx="1" fill="#4a3a18" opacity=".8"/>
              <rect x="152" y="72" width="7" height="38" rx="1" fill="#4a3a18" opacity=".8"/>
              <rect x="240" y="72" width="32" height="38" rx="2" fill="#6888aa" opacity=".7"/>
            </g>
            <!-- Café tables on sidewalk -->
            <g>
              <!-- Table 1 -->
              <ellipse cx="55" cy="155" rx="20" ry="8" fill="#8a6a30"/>
              <rect x="52" y="155" width="6" height="20" fill="#6a5020"/>
              <circle cx="48" cy="148" r="6" fill="#e8c870"/> <!-- coffee cup top -->
              <ellipse cx="48" cy="150" rx="5" ry="2" fill="#c8a850"/>
              <!-- Chair -->
              <rect x="28" y="148" width="18" height="14" rx="2" fill="#5a3a18"/>
              <g stroke="#4a2a10" stroke-width="1.5" fill="none"><line x1="30" y1="162" x2="28" y2="175"/><line x1="44" y1="162" x2="46" y2="175"/></g>
              <!-- Table 2 -->
              <ellipse cx="175" cy="158" rx="20" ry="8" fill="#8a6a30"/>
              <rect x="172" y="158" width="6" height="17" fill="#6a5020"/>
              <circle cx="168" cy="150" r="6" fill="#e8c870"/>
              <ellipse cx="168" cy="152" rx="5" ry="2" fill="#c8a850"/>
            </g>
            <!-- Flower boxes under windows -->
            <g fill="#5a2a10"><rect x="20" y="108" width="32" height="6" rx="2"/><rect x="125" y="108" width="32" height="6" rx="2"/><rect x="240" y="108" width="32" height="6" rx="2"/></g>
            <g fill="#e04060" opacity=".8"><circle cx="28" cy="107" r="3"/><circle cx="35" cy="107" r="3"/><circle cx="42" cy="107" r="3"/><circle cx="48" cy="107" r="3"/><circle cx="133" cy="107" r="3"/><circle cx="140" cy="107" r="3"/><circle cx="147" cy="107" r="3"/></g>
            <!-- Person sitting at café -->
            <g fill="#2a1a0a" transform="translate(35,148)">
              <ellipse cx="0" cy="0" rx="6" ry="8"/>
              <circle cx="0" cy="-10" r="6"/>
            </g>
          </svg>
        </div>
        <span class="ig-06__title">CAFÉ DE FLORE — Paris, 1968</span>
      </div>
      <!-- Frame 4: Old Havana street -->
      <div class="ig-06__frame">
        <div class="ig-06__img">
          <svg viewBox="0 0 310 175" xmlns="http://www.w3.org/2000/svg">
            <defs><linearGradient id="hvg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#88c0e8"/><stop offset="40%" stop-color="#aad4f0"/><stop offset="100%" stop-color="#c8e8f8"/></linearGradient></defs>
            <rect width="310" height="175" fill="url(#hvg)"/>
            <!-- Crumbling colorful buildings -->
            <g>
              <rect x="0" y="35" width="55" height="140" fill="#e85040"/>
              <rect x="0" y="35" width="55" height="10" fill="#c83828"/>
              <rect x="53" y="42" width="60" height="133" fill="#e8b840"/>
              <rect x="53" y="42" width="60" height="10" fill="#c89820"/>
              <rect x="111" y="30" width="50" height="145" fill="#48a8d0"/>
              <rect x="111" y="30" width="50" height="10" fill="#3088b0"/>
              <rect x="159" y="38" width="55" height="137" fill="#e06040"/>
              <rect x="159" y="38" width="55" height="10" fill="#c04020"/>
              <rect x="212" y="25" width="48" height="150" fill="#88c050"/>
              <rect x="212" y="25" width="48" height="10" fill="#68a030"/>
              <rect x="258" y="40" width="52" height="135" fill="#d0a040"/>
              <rect x="258" y="40" width="52" height="10" fill="#b08020"/>
            </g>
            <!-- Peeling paint texture -->
            <g fill="#fff" opacity=".05">
              <rect x="5" y="60" width="40" height="3"/><rect x="8" y="75" width="30" height="2"/>
              <rect x="60" y="55" width="45" height="3"/><rect x="170" y="65" width="35" height="2"/>
            </g>
            <!-- Ornate balconies -->
            <g fill="#5a3818">
              <rect x="8" y="78" width="36" height="5" rx="1"/><rect x="10" y="68" width="4" height="10"/><rect x="20" y="68" width="4" height="10"/><rect x="30" y="68" width="4" height="10"/><rect x="38" y="68" width="4" height="10"/>
              <rect x="62" y="85" width="38" height="5" rx="1"/><rect x="64" y="75" width="4" height="10"/><rect x="74" y="75" width="4" height="10"/><rect x="84" y="75" width="4" height="10"/><rect x="94" y="75" width="4" height="10"/>
              <rect x="118" y="72" width="36" height="5" rx="1"/>
            </g>
            <!-- Windows with shutters -->
            <g fill="#1a3a5a" opacity=".7">
              <rect x="12" y="55" width="12" height="16" rx="1"/><rect x="30" y="55" width="12" height="16" rx="1"/>
              <rect x="66" y="62" width="12" height="16" rx="1"/><rect x="84" y="62" width="12" height="16" rx="1"/>
              <rect x="120" y="50" width="12" height="16" rx="1"/><rect x="138" y="50" width="12" height="16" rx="1"/>
            </g>
            <!-- Cobblestone street -->
            <rect x="0" y="148" width="310" height="27" fill="#8a7858"/>
            <g fill="none" stroke="#6a5838" stroke-width=".8" opacity=".5">
              <line x1="0" y1="155" x2="310" y2="155"/><line x1="0" y1="163" x2="310" y2="163"/>
              <line x1="0" y1="170" x2="310" y2="170"/>
              <line x1="25" y1="148" x2="25" y2="175"/><line x1="55" y1="148" x2="55" y2="175"/>
              <line x1="85" y1="148" x2="85" y2="175"/><line x1="115" y1="148" x2="115" y2="175"/>
              <line x1="145" y1="148" x2="145" y2="175"/><line x1="175" y1="148" x2="175" y2="175"/>
              <line x1="205" y1="148" x2="205" y2="175"/><line x1="235" y1="148" x2="235" y2="175"/>
              <line x1="265" y1="148" x2="265" y2="175"/>
            </g>
            <!-- Classic car -->
            <g fill="#c02020" transform="translate(130,138)">
              <rect x="-40" y="-14" width="80" height="22" rx="7"/>
              <path d="M-32,-14 Q-24,-30 -6,-30 Q12,-30 22,-14" fill="#b01818"/>
              <circle cx="-26" cy="10" r="9" fill="#1a1a1a"/><circle cx="-26" cy="10" r="6" fill="#444"/>
              <circle cx="26" cy="10" r="9" fill="#1a1a1a"/><circle cx="26" cy="10" r="6" fill="#444"/>
            </g>
            <!-- Laundry hanging between buildings -->
            <g>
              <path d="M55,60 Q85,68 113,58" stroke="#8a6838" stroke-width=".8" fill="none"/>
              <g fill="#e8a030" opacity=".8"><rect x="63" y="55" width="6" height="12" rx="1"/></g>
              <g fill="#4a88cc" opacity=".8"><rect x="75" y="58" width="5" height="14" rx="1"/></g>
              <g fill="#e84030" opacity=".8"><rect x="87" y="56" width="6" height="12" rx="1"/></g>
              <g fill="#f0f0f0" opacity=".8"><rect x="100" y="55" width="6" height="11" rx="1"/></g>
            </g>
          </svg>
        </div>
        <span class="ig-06__title">OLD HAVANA — Cuba, 1975</span>
      </div>
      <!-- Frame 5: Tokyo at night rain -->
      <div class="ig-06__frame">
        <div class="ig-06__img">
          <svg viewBox="0 0 310 175" xmlns="http://www.w3.org/2000/svg">
            <defs><filter id="nf"><feGaussianBlur stdDeviation="3"/></filter></defs>
            <rect width="310" height="175" fill="#04040e"/>
            <!-- Building silhouettes -->
            <g fill="#060810">
              <rect x="0" y="50" width="35" height="125"/><rect x="33" y="30" width="28" height="145"/>
              <rect x="59" y="55" width="24" height="120"/><rect x="81" y="20" width="38" height="155"/>
              <rect x="117" y="42" width="26" height="133"/><rect x="141" y="15" width="44" height="160"/>
              <rect x="183" y="38" width="30" height="137"/><rect x="211" y="48" width="26" height="127"/>
              <rect x="235" y="22" width="40" height="153"/><rect x="273" y="45" width="37" height="130"/>
            </g>
            <!-- Window lights grid warm -->
            <g fill="#ffd060" opacity=".75">
              <rect x="4" y="60" width="5" height="5"/><rect x="12" y="60" width="5" height="5"/><rect x="20" y="60" width="5" height="5"/>
              <rect x="4" y="72" width="5" height="5"/><rect x="20" y="72" width="5" height="5"/>
              <rect x="38" y="38" width="5" height="6"/><rect x="46" y="38" width="5" height="6"/>
              <rect x="38" y="52" width="5" height="6"/><rect x="46" y="52" width="5" height="6"/>
              <rect x="87" y="30" width="6" height="6"/><rect x="96" y="30" width="6" height="6"/><rect x="105" y="30" width="6" height="6"/>
              <rect x="87" y="44" width="6" height="6"/><rect x="96" y="44" width="6" height="6"/>
              <rect x="148" y="22" width="6" height="6"/><rect x="158" y="22" width="6" height="6"/><rect x="168" y="22" width="6" height="6"/>
              <rect x="148" y="35" width="6" height="6"/><rect x="158" y="35" width="6" height="6"/><rect x="168" y="35" width="6" height="6"/>
              <rect x="148" y="48" width="6" height="6"/><rect x="168" y="48" width="6" height="6"/>
              <rect x="240" y="30" width="6" height="6"/><rect x="250" y="30" width="6" height="6"/><rect x="260" y="30" width="6" height="6"/>
              <rect x="240" y="44" width="6" height="6"/><rect x="260" y="44" width="6" height="6"/>
            </g>
            <!-- Neon signs -->
            <g filter="url(#nf)">
              <text x="62" y="90" font-size="9" fill="#ff2090" font-family="monospace" font-weight="bold">ラーメン</text>
              <text x="145" y="80" font-size="8" fill="#00ffcc" font-family="monospace" font-weight="bold">OPEN</text>
              <text x="218" y="88" font-size="7" fill="#ff8020" font-family="monospace" font-weight="bold">居酒屋</text>
            </g>
            <g>
              <text x="62" y="90" font-size="9" fill="#ff80cc" font-family="monospace" font-weight="bold" opacity=".7">ラーメン</text>
              <text x="145" y="80" font-size="8" fill="#80ffe8" font-family="monospace" font-weight="bold" opacity=".7">OPEN</text>
              <text x="218" y="88" font-size="7" fill="#ffbb80" font-family="monospace" font-weight="bold" opacity=".7">居酒屋</text>
            </g>
            <!-- Wet street / reflection -->
            <rect x="0" y="142" width="310" height="33" fill="#05060f"/>
            <!-- Reflections -->
            <g filter="url(#nf)" opacity=".45" transform="translate(0,290) scale(1,-1)">
              <text x="62" y="90" font-size="9" fill="#ff2090" font-family="monospace" font-weight="bold">ラーメン</text>
              <text x="145" y="80" font-size="8" fill="#00ffcc" font-family="monospace" font-weight="bold">OPEN</text>
            </g>
            <!-- Rain streaks -->
            <g stroke="rgba(180,200,255,.12)" stroke-width=".6">
              <line x1="15" y1="0" x2="13" y2="175"/><line x1="45" y1="0" x2="43" y2="175"/>
              <line x1="80" y1="0" x2="78" y2="175"/><line x1="120" y1="0" x2="118" y2="175"/>
              <line x1="160" y1="0" x2="158" y2="175"/><line x1="200" y1="0" x2="198" y2="175"/>
              <line x1="240" y1="0" x2="238" y2="175"/><line x1="280" y1="0" x2="278" y2="175"/>
            </g>
            <!-- Pedestrian -->
            <g fill="#0a0a18" transform="translate(100,140)">
              <ellipse cx="0" cy="-8" rx="5" ry="7"/>
              <circle cx="0" cy="-17" r="4.5"/>
              <!-- Umbrella -->
              <path d="M-15,-22 Q0,-38 15,-22 Z" fill="#c02020"/>
              <line x1="0" y1="-22" x2="0" y2="-38" stroke="#8a1818" stroke-width="1.5"/>
            </g>
          </svg>
        </div>
        <span class="ig-06__title">SHINJUKU RAIN — Tokyo, 1988</span>
      </div>
    </div>
  </div>
</div>
<p class="ig-06__hint">← Scroll the filmstrip →</p>
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:#0a0805;font-family:'DM Sans',sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:2rem 0;gap:1rem}
.ig-06{width:100%}
.ig-06__reel{background:#100a02;border-top:5px solid #0a0602;border-bottom:5px solid #0a0602;position:relative;overflow:hidden}
.ig-06__reel::before,.ig-06__reel::after{content:'';position:absolute;left:0;right:0;height:20px;z-index:2;pointer-events:none;background:#100a02 repeating-linear-gradient(to right,transparent 0,transparent 5px,#000 5px,#000 7px,transparent 7px,transparent 12px,#1a0e04 12px,#1a0e04 22px,transparent 22px,transparent 28px)}
.ig-06__reel::before{top:0}.ig-06__reel::after{bottom:0}
.ig-06__strip{display:flex;gap:.6rem;overflow-x:scroll;scroll-snap-type:x mandatory;scrollbar-width:none;padding:26px 1.2rem;-webkit-overflow-scrolling:touch}
.ig-06__strip::-webkit-scrollbar{display:none}
.ig-06__frame{flex-shrink:0;min-width:clamp(220px,58vw,310px);scroll-snap-align:center;border:3px solid #2a1a08;border-radius:2px;overflow:hidden;position:relative;background:#000;transition:border-color .3s ease}
.ig-06__frame:hover{border-color:#d4a840}
.ig-06__img{width:100%;aspect-ratio:16/9;display:block}
.ig-06__img svg{width:100%;height:100%;display:block}
.ig-06__title{display:block;text-align:center;color:rgba(255,200,80,.75);font-size:.7rem;font-family:'Special Elite',cursive;letter-spacing:.1em;padding:.4rem;background:#0a0602}
.ig-06__hint{color:rgba(255,255,255,.28);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;text-align:center}
@media(prefers-reduced-motion:reduce){.ig-06__frame{transition:none}}

How this works

The reel track uses overflow-x: scroll with scroll-snap-type: x mandatory and each frame has scroll-snap-align: center, creating native CSS snap scrolling. The scrollbar is hidden via scrollbar-width: none (Firefox) and ::-webkit-scrollbar { display: none } (WebKit). Frames flex in a row with flex-shrink: 0 and min-width: clamp(220px,58vw,310px) for responsive sizing.

The sprocket holes along the top and bottom edges use a CSS repeating-linear-gradient pattern on the .ig-06__reel::before and ::after pseudo-elements, creating the appearance of real film perforations without any extra DOM elements.

Customize

  • Change the filmstrip background from dark brown to true black by editing background: #100a02 on .ig-06__reel and adjusting the border colors.
  • Add a sepia tint to all frames via filter: sepia(.6) contrast(1.1) on the .ig-06__img selector for a more authentic vintage look.
  • Increase the snap tension by changing scroll-snap-type: x mandatory to proximity for gentler snapping that only engages near frame centers.
  • Make frames wider by increasing the clamp middle value — try clamp(280px,72vw,400px) for a more cinematic single-frame view.
  • Colorize specific title text by targeting .ig-06__title and using OKLCH values like color: oklch(75% .18 60) for per-frame warm amber tones.

Watch out for

  • The scroll-snap-type: x mandatory setting will forcibly snap even mid-scroll on some browsers — use proximity if users need more free-form scrolling.
  • Hiding the scrollbar removes the visual affordance for scrollability — always pair with a visible scroll hint or arrow indicator so users know the strip is scrollable.
  • The repeating-linear-gradient sprocket pattern requires pixel-perfect values; changing the reel height will break the pattern proportions and require recalculation.

Browser support

ChromeSafariFirefoxEdge
69+ 11+ 68+ 69+

CSS scroll-snap is broadly supported; scroll-snap-type with mandatory requires Chrome 69+, Safari 11+.

More from 16 CSS Image Gallery Designs

CSS 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 GalleryCSS Lightbox Gallery Overlay
View the full collection →

Search CodeFronts

Loading…

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