16 CSS Image Gallery Designs 15 / 16

CSS Ken Burns Slideshow Gallery

A six-slide arctic wildlife slideshow with the Ken Burns zoom-pan effect on each active slide, auto-advancing with JS dot navigation and manual controls.

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

The code

<div class="ig-15" id="ig-15">

  <!-- Slide 1: Polar bear on sea ice -->
  <div class="ig-15__slide ig-15--active">
    <div class="ig-15__img">
      <svg viewBox="0 0 760 428" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <linearGradient id="pbg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#2a4060"/><stop offset="40%" stop-color="#3a5878"/><stop offset="70%" stop-color="#4a6888"/><stop offset="100%" stop-color="#1a2a40"/></linearGradient>
          <radialGradient id="pbig" cx="35%" cy="60%" r="50%"><stop offset="0%" stop-color="#d8e8f8"/><stop offset="60%" stop-color="#c0d4e8"/><stop offset="100%" stop-color="#a8c4d8"/></radialGradient>
          <filter id="pbf"><feGaussianBlur stdDeviation="6"/></filter>
          <filter id="pbf2"><feGaussianBlur stdDeviation="2"/></filter>
        </defs>
        <rect width="760" height="428" fill="url(#pbg)"/>
        <!-- Aurora hint -->
        <g opacity=".25" filter="url(#pbf)">
          <path d="M0,100 Q190,55 380,100 Q570,145 760,80" stroke="#00e8a0" stroke-width="40" fill="none"/>
          <path d="M0,130 Q200,82 400,122 Q580,162 760,108" stroke="#6040ff" stroke-width="25" fill="none"/>
        </g>
        <!-- Stars -->
        <g fill="#fff" opacity=".7">
          <circle cx="30" cy="25" r="1.2"/><circle cx="80" cy="12" r="1"/><circle cx="145" cy="30" r="1.3"/><circle cx="220" cy="8" r="1.1"/><circle cx="300" cy="20" r="1.2"/><circle cx="380" cy="5" r="1.4"/><circle cx="460" cy="18" r="1.1"/><circle cx="540" cy="8" r="1.2"/><circle cx="620" cy="25" r="1"/><circle cx="700" cy="12" r="1.3"/><circle cx="745" cy="30" r="1.1"/>
          <circle cx="55" cy="52" r=".9"/><circle cx="130" cy="45" r="1"/><circle cx="200" cy="58" r=".9"/><circle cx="280" cy="42" r="1.1"/><circle cx="420" cy="48" r=".9"/><circle cx="500" cy="38" r="1"/><circle cx="590" cy="52" r=".9"/><circle cx="670" cy="44" r="1.1"/>
        </g>
        <!-- Sea ice floe -->
        <path d="M0,300 Q80,270 160,282 Q240,268 320,278 Q400,265 480,275 Q560,265 640,272 Q700,265 760,270 L760,428 L0,428 Z" fill="url(#pbig)"/>
        <!-- Ice texture / cracks -->
        <g stroke="#88a8c8" stroke-width="1" fill="none" opacity=".4">
          <path d="M80,305 Q100,315 95,330 Q90,342 100,355"/><path d="M200,300 Q220,312 215,328"/><path d="M350,295 Q365,308 360,325 Q355,338 365,352"/><path d="M500,298 Q515,310 510,325"/><path d="M650,302 Q668,316 662,332"/>
        </g>
        <!-- Snow mounds -->
        <g fill="#d0e4f8" opacity=".7" filter="url(#pbf2)">
          <ellipse cx="150" cy="310" rx="80" ry="25"/><ellipse cx="580" cy="305" rx="70" ry="22"/><ellipse cx="380" cy="320" rx="60" ry="20"/>
        </g>
        <!-- Open water lead (dark gap) -->
        <path d="M0,340 Q380,328 760,338 L760,360 Q380,348 0,360 Z" fill="#1a3050" opacity=".5"/>
        <!-- Polar bear (large, detailed) -->
        <g transform="translate(280,295)">
          <!-- Body -->
          <ellipse cx="0" cy="15" rx="65" ry="38" fill="#e8f0f8"/>
          <ellipse cx="5" cy="12" rx="58" ry="32" fill="#f0f8ff" opacity=".8"/>
          <!-- Head -->
          <ellipse cx="-50" cy="5" rx="32" ry="26" fill="#e8f0f8"/>
          <ellipse cx="-55" cy="2" rx="25" ry="20" fill="#f0f8ff" opacity=".8"/>
          <!-- Muzzle -->
          <ellipse cx="-72" cy="10" rx="14" ry="10" fill="#dde8f0"/>
          <!-- Nose -->
          <ellipse cx="-82" cy="8" rx="6" ry="4" fill="#2a2a2a"/>
          <!-- Eyes -->
          <circle cx="-62" cy="-5" r="4" fill="#1a1a1a"/><circle cx="-61" cy="-6" r="1.5" fill="#fff"/>
          <!-- Ears -->
          <ellipse cx="-42" cy="-18" rx="9" ry="7" fill="#e0eaf8"/>
          <ellipse cx="-42" cy="-18" rx="5" ry="4" fill="#d0e0f0"/>
          <!-- Front legs extended (lying pose) -->
          <ellipse cx="-40" cy="46" rx="22" ry="9" fill="#dde8f4" transform="rotate(-15,-40,46)"/>
          <ellipse cx="-20" cy="50" rx="18" ry="8" fill="#dde8f4" transform="rotate(-10,-20,50)"/>
          <!-- Back legs -->
          <ellipse cx="48" cy="46" rx="20" ry="9" fill="#dde8f4" transform="rotate(15,48,46)"/>
          <ellipse cx="65" cy="48" rx="16" ry="8" fill="#dde8f4" transform="rotate(10,65,48)"/>
          <!-- Paw details -->
          <g fill="#c8d8e8"><ellipse cx="-55" cy="52" rx="12" ry="6"/><ellipse cx="62" cy="54" rx="10" ry="5"/></g>
          <!-- Fur texture highlights -->
          <g stroke="#c0d4e8" stroke-width=".8" fill="none" opacity=".4">
            <path d="M-30,5 Q-20,0 -10,5"/><path d="M-10,10 Q0,6 10,10"/><path d="M10,15 Q20,11 30,15"/><path d="M-20,-5 Q-10,-9 0,-5"/>
          </g>
          <!-- Cub behind! -->
          <ellipse cx="55" cy="5" rx="28" ry="20" fill="#e8f0f8"/>
          <ellipse cx="44" cy="0" rx="16" ry="14" fill="#f0f8ff" opacity=".8"/>
          <ellipse cx="38" cy="2" rx="8" ry="7" fill="#dde8f0"/>
          <ellipse cx="32" cy="1" rx="4" ry="3" fill="#2a2a2a"/>
          <circle cx="40" cy="-5" r="2.5" fill="#1a1a1a"/><circle cx="40" cy="-6" r="1" fill="#fff"/>
          <ellipse cx="52" cy="-12" rx="5" ry="4" fill="#e0eaf8"/>
        </g>
        <!-- Distant icebergs -->
        <g fill="#c8dced" opacity=".7">
          <polygon points="600,278 625,248 650,278"/><polygon points="640,280 660,258 680,280"/>
          <polygon points="50,282 75,255 100,282"/><polygon points="100,278 115,262 130,278"/>
        </g>
        <!-- Ice edge sparkle -->
        <g fill="#e8f4ff" opacity=".6" filter="url(#pbf2)">
          <ellipse cx="200" cy="295" rx="30" ry="8"/><ellipse cx="520" cy="292" rx="25" ry="7"/>
        </g>
      </svg>
    </div>
    <div class="ig-15__caption"><h3>Polar Bear & Cub</h3><p>Sea ice, Svalbard Archipelago · Arctic Ocean</p></div>
  </div>

  <!-- Slide 2: Narwhal pod under ice -->
  <div class="ig-15__slide">
    <div class="ig-15__img">
      <svg viewBox="0 0 760 428" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <radialGradient id="nwg" cx="50%" cy="40%" r="60%"><stop offset="0%" stop-color="#1a3a5a"/><stop offset="60%" stop-color="#0a1a30"/><stop offset="100%" stop-color="#040810"/></radialGradient>
          <filter id="nwf"><feGaussianBlur stdDeviation="6"/></filter>
          <filter id="nwf2"><feGaussianBlur stdDeviation="2"/></filter>
        </defs>
        <rect width="760" height="428" fill="url(#nwg)"/>
        <!-- Underside of ice sheet (ceiling) -->
        <path d="M0,0 Q80,25 160,12 Q240,30 320,15 Q400,32 480,18 Q560,34 640,20 Q700,30 760,18 L760,65 L0,65 Z" fill="#b8d4ec" opacity=".9"/>
        <path d="M0,0 Q95,20 190,8 Q280,24 370,10 Q460,26 550,12 Q640,28 760,14 L760,50 L0,50 Z" fill="#c8e0f4" opacity=".7"/>
        <!-- Ice cracks with light shining through -->
        <g fill="#88ccff" opacity=".5" filter="url(#nwf)">
          <rect x="120" y="0" width="8" height="65" transform="rotate(5,124,32)"/>
          <rect x="320" y="0" width="6" height="60" transform="rotate(-3,323,30)"/>
          <rect x="540" y="0" width="7" height="58" transform="rotate(4,543,29)"/>
        </g>
        <!-- Light shafts through cracks -->
        <g opacity=".15" fill="#a0d8ff">
          <polygon points="118,12 128,12 160,428 150,428"/>
          <polygon points="318,8 326,8 355,428 347,428"/>
          <polygon points="537,10 545,10 572,428 564,428"/>
        </g>
        <!-- Pod of narwhals -->
        <!-- Narwhal 1 (main, horizontal center) -->
        <g transform="translate(380,200)">
          <ellipse cx="0" cy="0" rx="90" ry="25" fill="#4a6a8a"/>
          <ellipse cx="10" cy="-5" rx="70" ry="18" fill="#5a7a9a" opacity=".7"/>
          <!-- Belly lighter -->
          <ellipse cx="5" cy="8" rx="60" ry="12" fill="#8aaa c0" opacity=".4"/>
          <!-- Tusk (long straight horn) -->
          <line x1="-90" y1="-3" x2="-230" y2="-8" stroke="#d8e0e8" stroke-width="5" stroke-linecap="round"/>
          <line x1="-90" y1="-3" x2="-230" y2="-8" stroke="#eef4f8" stroke-width="2" stroke-linecap="round"/>
          <!-- Dorsal ridge (narwhals have no fin) -->
          <path d="M-20,-18 Q10,-22 40,-18" stroke="#3a5a7a" stroke-width="3" fill="none"/>
          <!-- Flukes -->
          <path d="M90,0 Q105,-18 115,-14 Q108,0 115,14 Q105,18 90,0 Z" fill="#4a6a8a"/>
          <!-- Flippers -->
          <ellipse cx="-30" cy="18" rx="20" ry="8" fill="#4a6a8a" transform="rotate(20,-30,18)"/>
          <!-- Eye -->
          <circle cx="-70" cy="-5" r="5" fill="#1a2a3a"/><circle cx="-69" cy="-6" r="2" fill="#fff"/>
          <!-- Spotted pattern -->
          <g fill="#3a5a78" opacity=".4"><circle cx="-20" cy="5" r="6"/><circle cx="0" cy="8" r="5"/><circle cx="20" cy="6" r="6"/><circle cx="40" cy="4" r="5"/><circle cx="-45" cy="3" r="5"/></g>
        </g>
        <!-- Narwhal 2 (angled, lower) -->
        <g transform="translate(180,300) rotate(-12)">
          <ellipse cx="0" cy="0" rx="75" ry="20" fill="#3a5a7a"/>
          <line x1="-75" y1="-2" x2="-185" y2="-6" stroke="#d0d8e0" stroke-width="4" stroke-linecap="round"/>
          <path d="M75,0 Q86,-15 94,-12 Q88,0 94,12 Q86,15 75,0 Z" fill="#3a5a7a"/>
          <ellipse cx="-25" cy="14" rx="16" ry="7" fill="#3a5a7a" transform="rotate(18,-25,14)"/>
          <circle cx="-58" cy="-4" r="4" fill="#1a2a3a"/><circle cx="-57" cy="-5" r="1.5" fill="#fff"/>
        </g>
        <!-- Narwhal 3 (calf, small, upper right) -->
        <g transform="translate(580,140) rotate(8)">
          <ellipse cx="0" cy="0" rx="45" ry="13" fill="#5a7a9a"/>
          <line x1="-45" y1="-2" x2="-105" y2="-4" stroke="#c8d4dc" stroke-width="3" stroke-linecap="round"/>
          <path d="M45,0 Q52,-10 58,-8 Q54,0 58,8 Q52,10 45,0 Z" fill="#5a7a9a"/>
          <circle cx="-35" cy="-3" r="3" fill="#1a2a3a"/>
        </g>
        <!-- Bubbles rising -->
        <g fill="#88ccff" opacity=".5"><circle cx="200" cy="180" r="5"/><circle cx="210" cy="155" r="4"/><circle cx="205" cy="132" r="6"/><circle cx="395" cy="160" r="4"/><circle cx="400" cy="138" r="5"/><circle cx="402" cy="115" r="3"/><circle cx="590" cy="175" r="4"/><circle cx="595" cy="150" r="5"/></g>
        <!-- Particles / plankton -->
        <g fill="#60aaff" opacity=".3"><circle cx="80" cy="150" r="2"/><circle cx="150" cy="200" r="2.5"/><circle cx="300" cy="120" r="2"/><circle cx="450" cy="250" r="2.5"/><circle cx="600" cy="120" r="2"/><circle cx="680" cy="200" r="2.5"/><circle cx="720" cy="300" r="2"/></g>
        <!-- Deep darkness below -->
        <rect x="0" y="350" width="760" height="78" fill="#040810" opacity=".5"/>
        <!-- Water surface light play -->
        <g stroke="#80c8ff" stroke-width="1" fill="none" opacity=".2">
          <path d="M0,90 Q95,80 190,90 Q285,80 380,90 Q475,80 570,90 Q665,80 760,88"/>
          <path d="M0,120 Q95,112 190,120 Q285,112 380,120 Q475,112 570,120 Q665,112 760,118"/>
        </g>
      </svg>
    </div>
    <div class="ig-15__caption"><h3>Narwhal Pod</h3><p>Below Arctic sea ice, Baffin Bay · Canada</p></div>
  </div>

  <!-- Slide 3: Arctic fox in snow storm -->
  <div class="ig-15__slide">
    <div class="ig-15__img">
      <svg viewBox="0 0 760 428" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <linearGradient id="afg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#6a88a0"/><stop offset="50%" stop-color="#8aaac0"/><stop offset="100%" stop-color="#c0d4e4"/></linearGradient>
          <filter id="aff"><feGaussianBlur stdDeviation="8"/></filter>
          <filter id="aff2"><feGaussianBlur stdDeviation="3"/></filter>
        </defs>
        <rect width="760" height="428" fill="url(#afg)"/>
        <!-- Blizzard snow fill -->
        <rect width="760" height="428" fill="#d0e4f0" opacity=".25" filter="url(#aff)"/>
        <!-- Snow ground -->
        <path d="M0,310 Q95,290 190,302 Q285,288 380,298 Q475,285 570,295 Q665,283 760,292 L760,428 L0,428 Z" fill="#e8f2fa"/>
        <path d="M0,340 Q190,328 380,336 Q570,325 760,334 L760,428 L0,428 Z" fill="#f0f8ff"/>
        <!-- Drifted snow shapes -->
        <g fill="#dceef8" opacity=".7" filter="url(#aff2)">
          <ellipse cx="120" cy="328" rx="120" ry="30"/><ellipse cx="500" cy="320" rx="100" ry="28"/><ellipse cx="680" cy="332" rx="90" ry="25"/>
        </g>
        <!-- Arctic fox (curled, fluffy, white winter coat) -->
        <g transform="translate(340,320)">
          <!-- Curled body -->
          <ellipse cx="0" cy="-10" rx="70" ry="42" fill="#f5f8fc"/>
          <ellipse cx="5" cy="-12" rx="60" ry="35" fill="#fff" opacity=".8"/>
          <!-- Fluffy tail curled around body -->
          <path d="M65,-8 Q88,18 70,40 Q45,58 18,48 Q0,42 -5,30" stroke="#e8f0f8" stroke-width="22" fill="none" stroke-linecap="round"/>
          <path d="M65,-8 Q85,14 68,36 Q44,53 18,44 Q2,38 -3,27" stroke="#fff" stroke-width="14" fill="none" stroke-linecap="round"/>
          <!-- Tail tip (darker) -->
          <circle cx="-4" cy="28" r="12" fill="#d8e8f4"/>
          <!-- Head (lowered, tucked) -->
          <ellipse cx="-60" cy="-18" rx="30" ry="24" fill="#f5f8fc"/>
          <ellipse cx="-65" cy="-20" rx="22" ry="18" fill="#fff" opacity=".8"/>
          <!-- Muzzle -->
          <ellipse cx="-85" cy="-12" rx="14" ry="10" fill="#edf4fa"/>
          <!-- Nose -->
          <ellipse cx="-96" cy="-10" rx="5" ry="4" fill="#1a1a1a"/>
          <!-- Eyes (squinting in wind) -->
          <path d="M-72,-22 Q-68,-18 -64,-22" stroke="#1a1a1a" stroke-width="2.5" fill="none" stroke-linecap="round"/>
          <!-- Ears (pressed back) -->
          <ellipse cx="-48" cy="-40" rx="10" ry="8" fill="#e8f0f8" transform="rotate(-30,-48,-40)"/>
          <ellipse cx="-48" cy="-40" rx="6" ry="4" fill="#f8e8e8" transform="rotate(-30,-48,-40)"/>
          <!-- Paws tucked under -->
          <ellipse cx="-35" cy="20" rx="18" ry="10" fill="#edf4fa" transform="rotate(15,-35,20)"/>
          <ellipse cx="25" cy="28" rx="16" ry="9" fill="#edf4fa" transform="rotate(-10,25,28)"/>
          <!-- Fur texture -->
          <g stroke="#d8e8f4" stroke-width=".8" fill="none" opacity=".5">
            <path d="M-40,-10 Q-25,-14 -10,-10"/><path d="M-10,-8 Q8,-12 25,-8"/><path d="M25,-5 Q42,-9 58,-5"/>
            <path d="M-50,-5 Q-38,-10 -25,-5"/><path d="M-55,5 Q-40,1 -28,5"/>
          </g>
        </g>
        <!-- Storm snow particles -->
        <g fill="#fff" opacity=".8">
          <circle cx="50" cy="80" r="3"/><circle cx="120" cy="45" r="2.5"/><circle cx="200" cy="100" r="3.5"/><circle cx="280" cy="60" r="2"/><circle cx="350" cy="120" r="3"/><circle cx="430" cy="40" r="2.5"/><circle cx="510" cy="90" r="3"/><circle cx="590" cy="55" r="2"/><circle cx="660" cy="110" r="3.5"/><circle cx="730" cy="70" r="2.5"/>
          <circle cx="80" cy="160" r="2"/><circle cx="170" cy="200" r="3"/><circle cx="260" cy="145" r="2.5"/><circle cx="340" cy="185" r="2"/><circle cx="450" cy="170" r="3"/><circle cx="540" cy="140" r="2.5"/><circle cx="630" cy="190" r="2"/><circle cx="720" cy="155" r="3"/>
          <circle cx="30" cy="250" r="3.5"/><circle cx="140" cy="280" r="2"/><circle cx="240" cy="240" r="3"/><circle cx="400" cy="265" r="2.5"/><circle cx="500" cy="248" r="2"/><circle cx="610" cy="270" r="3"/><circle cx="700" cy="255" r="2.5"/>
        </g>
        <!-- Blizzard streaks (horizontal) -->
        <g stroke="#e8f4ff" stroke-width=".6" opacity=".3">
          <line x1="0" y1="100" x2="760" y2="95"/><line x1="0" y1="200" x2="760" y2="195"/>
          <line x1="0" y1="140" x2="760" y2="136"/><line x1="0" y1="240" x2="760" y2="236"/>
        </g>
        <!-- Distant trees barely visible in storm -->
        <g fill="#8aaac0" opacity=".25" filter="url(#aff)">
          <polygon points="0,310 18,265 36,310"/><polygon points="25,310 45,270 65,310"/>
          <polygon points="680,310 698,268 716,310"/><polygon points="706,310 724,272 742,310"/>
          <polygon points="730,310 748,278 760,310"/>
        </g>
      </svg>
    </div>
    <div class="ig-15__caption"><h3>Arctic Fox in Blizzard</h3><p>Winter tundra, Wrangel Island · Siberia</p></div>
  </div>

  <!-- Slide 4: Snowy owl in flight -->
  <div class="ig-15__slide">
    <div class="ig-15__img">
      <svg viewBox="0 0 760 428" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <linearGradient id="sog" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#2a3a4a"/><stop offset="50%" stop-color="#3a5060"/><stop offset="100%" stop-color="#5a7080"/></linearGradient>
          <filter id="sof"><feGaussianBlur stdDeviation="5"/></filter>
        </defs>
        <rect width="760" height="428" fill="url(#sog)"/>
        <!-- Overcast sky texture -->
        <g fill="#4a6070" opacity=".3" filter="url(#sof)"><ellipse cx="200" cy="80" rx="200" ry="60"/><ellipse cx="560" cy="100" rx="180" ry="55"/><ellipse cx="380" cy="50" rx="160" ry="45"/></g>
        <!-- Snow tundra below -->
        <path d="M0,310 Q95,295 190,305 Q285,292 380,300 Q475,288 570,298 Q665,285 760,294 L760,428 L0,428 Z" fill="#c8d8e4"/>
        <path d="M0,345 Q190,332 380,340 Q570,328 760,338 L760,428 L0,428 Z" fill="#d8e8f0"/>
        <!-- Distant mountains -->
        <g fill="#5a7080" opacity=".4"><polygon points="0,310 50,260 100,310"/><polygon points="60,310 115,252 170,310"/><polygon points="580,310 638,255 696,310"/><polygon points="630,308 688,250 746,308"/></g>
        <!-- Snowy owl in flight (large, dramatic wings spread) -->
        <g transform="translate(380,180)">
          <!-- LEFT WING (spread wide, downstroke) -->
          <path d="M-20,-10 Q-100,-30 -170,-55 Q-230,-70 -280,-60 Q-250,-40 -200,-15 Q-140,5 -70,12 Q-40,18 -20,15 Z" fill="#f0f4f8"/>
          <path d="M-20,-10 Q-100,-28 -168,-52 Q-225,-66 -272,-56 Q-246,-38 -198,-14 Q-138,6 -68,13 Q-38,19 -20,15 Z" fill="#fff" opacity=".7"/>
          <!-- Wing barring patterns left -->
          <g fill="#c8d4dc" opacity=".4">
            <ellipse cx="-120" cy="-35" rx="20" ry="8" transform="rotate(-15,-120,-35)"/>
            <ellipse cx="-180" cy="-52" rx="18" ry="7" transform="rotate(-10,-180,-52)"/>
            <ellipse cx="-240" cy="-62" rx="16" ry="6" transform="rotate(-5,-240,-62)"/>
            <ellipse cx="-90" cy="-22" rx="15" ry="6" transform="rotate(-20,-90,-22)"/>
          </g>
          <!-- RIGHT WING -->
          <path d="M20,-10 Q100,-30 170,-55 Q230,-70 280,-60 Q250,-40 200,-15 Q140,5 70,12 Q40,18 20,15 Z" fill="#f0f4f8"/>
          <path d="M20,-10 Q100,-28 168,-52 Q225,-66 272,-56 Q246,-38 198,-14 Q138,6 68,13 Q38,19 20,15 Z" fill="#fff" opacity=".7"/>
          <g fill="#c8d4dc" opacity=".4">
            <ellipse cx="120" cy="-35" rx="20" ry="8" transform="rotate(15,120,-35)"/>
            <ellipse cx="180" cy="-52" rx="18" ry="7" transform="rotate(10,180,-52)"/>
            <ellipse cx="240" cy="-62" rx="16" ry="6" transform="rotate(5,240,-62)"/>
            <ellipse cx="90" cy="-22" rx="15" ry="6" transform="rotate(20,90,-22)"/>
          </g>
          <!-- Body -->
          <ellipse cx="0" cy="15" rx="35" ry="48" fill="#f0f4f8"/>
          <ellipse cx="0" cy="12" rx="28" ry="40" fill="#fff" opacity=".8"/>
          <!-- Facial disc (round owl face) -->
          <ellipse cx="0" cy="-5" rx="28" ry="26" fill="#e8eef4"/>
          <ellipse cx="0" cy="-5" rx="24" ry="22" fill="#f0f4f8"/>
          <!-- Facial disc outline (darker) -->
          <path d="M0,-31 Q18,-28 28,-10 Q30,5 25,18 Q12,28 0,30 Q-12,28 -25,18 Q-30,5 -28,-10 Q-18,-28 0,-31 Z" fill="none" stroke="#c8d4e0" stroke-width="2"/>
          <!-- Eyes (bright yellow) -->
          <circle cx="-10" cy="-5" r="10" fill="#1a1a14"/>
          <circle cx="-10" cy="-5" r="8" fill="#f0c020"/>
          <circle cx="-10" cy="-5" r="5" fill="#0a0a0a"/>
          <circle cx="-8" cy="-7" r="2" fill="#fff"/>
          <circle cx="10" cy="-5" r="10" fill="#1a1a14"/>
          <circle cx="10" cy="-5" r="8" fill="#f0c020"/>
          <circle cx="10" cy="-5" r="5" fill="#0a0a0a"/>
          <circle cx="12" cy="-7" r="2" fill="#fff"/>
          <!-- Beak -->
          <path d="M-3,5 Q0,12 3,5 Q0,2 -3,5 Z" fill="#d0a040"/>
          <!-- Feet (talons, forward) -->
          <g fill="#c89030">
            <path d="M-15,55 Q-20,68 -22,80 M-15,55 Q-12,70 -10,82 M-15,55 Q-8,66 -5,78 M-15,55 Q-22,58 -28,62" stroke="#c89030" stroke-width="3" fill="none" stroke-linecap="round"/>
            <path d="M15,55 Q20,68 22,80 M15,55 Q12,70 10,82 M15,55 Q8,66 5,78 M15,55 Q22,58 28,62" stroke="#c89030" stroke-width="3" fill="none" stroke-linecap="round"/>
          </g>
          <!-- Speckling on chest -->
          <g fill="#b0c0cc" opacity=".35"><circle cx="-8" cy="25" r="4"/><circle cx="5" cy="30" r="3.5"/><circle cx="15" cy="22" r="4"/><circle cx="-15" cy="35" r="3"/><circle cx="0" cy="42" r="4"/><circle cx="18" cy="38" r="3"/></g>
          <!-- Tail feathers down -->
          <path d="M-18,55 Q-10,72 0,78 Q10,72 18,55" fill="#e8eef4"/>
          <path d="M-14,55 Q-6,70 0,75 Q6,70 14,55" fill="#fff" opacity=".7"/>
        </g>
        <!-- Snowflakes -->
        <g fill="#fff" opacity=".6"><circle cx="80" cy="80" r="3"/><circle cx="180" cy="45" r="2.5"/><circle cx="280" cy="100" r="3.5"/><circle cx="550" cy="70" r="3"/><circle cx="650" cy="40" r="2.5"/><circle cx="700" cy="110" r="3"/><circle cx="100" cy="200" r="2"/><circle cx="620" cy="220" r="2.5"/></g>
      </svg>
    </div>
    <div class="ig-15__caption"><h3>Snowy Owl in Flight</h3><p>Arctic tundra, Churchill · Manitoba, Canada</p></div>
  </div>

  <!-- Slide 5: Walrus on rocky shore -->
  <div class="ig-15__slide">
    <div class="ig-15__img">
      <svg viewBox="0 0 760 428" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <linearGradient id="wlg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#3a5878"/><stop offset="40%" stop-color="#4a6888"/><stop offset="70%" stop-color="#5a7898"/><stop offset="100%" stop-color="#4a6070"/></linearGradient>
          <filter id="wlf"><feGaussianBlur stdDeviation="5"/></filter>
        </defs>
        <rect width="760" height="428" fill="url(#wlg)"/>
        <!-- Cloudy arctic sky -->
        <g fill="#88a8c8" opacity=".3" filter="url(#wlf)"><ellipse cx="180" cy="70" rx="180" ry="55"/><ellipse cx="540" cy="55" rx="160" ry="48"/><ellipse cx="380" cy="90" rx="140" ry="42"/></g>
        <!-- Rocky shoreline -->
        <path d="M0,270 Q80,255 160,265 Q240,252 320,260 Q400,248 480,258 Q560,246 640,255 Q700,248 760,253 L760,428 L0,428 Z" fill="#4a3a2a"/>
        <path d="M0,295 Q80,282 160,290 Q240,278 320,285 Q400,272 480,280 Q560,268 640,277 Q700,270 760,274 L760,428 L0,428 Z" fill="#3a2a1a"/>
        <!-- Rocks detail -->
        <g fill="#2a1a0a" opacity=".8">
          <ellipse cx="80" cy="280" rx="55" ry="22"/><ellipse cx="200" cy="275" rx="45" ry="18"/><ellipse cx="550" cy="278" rx="50" ry="20"/><ellipse cx="680" cy="272" rx="48" ry="19"/><ellipse cx="380" cy="282" rx="40" ry="15"/>
        </g>
        <!-- Haul-out: pile of walruses (overlapping) -->
        <!-- Back walruses (smaller, lighter) -->
        <g transform="translate(200,300)" fill="#8a5a38" opacity=".7">
          <ellipse cx="0" cy="0" rx="50" ry="25"/><ellipse cx="-30" cy="-12" rx="22" ry="18"/>
          <path d="M-40,-8 Q-48,5 -44,18" stroke="#8a5a38" stroke-width="6" fill="none"/>
        </g>
        <g transform="translate(550,295)" fill="#7a4a28" opacity=".7">
          <ellipse cx="0" cy="0" rx="55" ry="28"/><ellipse cx="-32" cy="-14" rx="24" ry="20"/>
          <path d="M-44,-10 Q-52,4 -48,18" stroke="#7a4a28" stroke-width="6" fill="none"/>
        </g>
        <!-- Main walrus (large, front) -->
        <g transform="translate(380,310)">
          <!-- Body (massive) -->
          <ellipse cx="0" cy="0" rx="110" ry="55" fill="#7a4a28"/>
          <ellipse cx="5" cy="-5" rx="95" ry="45" fill="#8a5a38" opacity=".7"/>
          <!-- Wrinkled skin folds -->
          <g stroke="#5a3010" stroke-width="1.5" fill="none" opacity=".4">
            <path d="M-60,10 Q-40,18 -20,10"/><path d="M-40,20 Q-20,28 0,20"/><path d="M0,15 Q20,22 40,15"/>
            <path d="M-50,-5 Q-30,2 -10,-5"/><path d="M20,-8 Q40,-2 60,-8"/>
          </g>
          <!-- Head -->
          <ellipse cx="-90" cy="-18" rx="38" ry="32" fill="#7a4a28"/>
          <ellipse cx="-95" cy="-20" rx="30" ry="25" fill="#8a5a38" opacity=".7"/>
          <!-- Whisker pad (moustache) -->
          <ellipse cx="-115" cy="-12" rx="18" ry="12" fill="#6a3a18"/>
          <!-- Whiskers -->
          <g stroke="#d0b080" stroke-width="1" fill="none" opacity=".7">
            <line x1="-128" y1="-16" x2="-155" y2="-20"/><line x1="-128" y1="-12" x2="-156" y2="-12"/><line x1="-128" y1="-8" x2="-154" y2="-5"/>
            <line x1="-125" y1="-18" x2="-150" y2="-24"/><line x1="-125" y1="-6" x2="-150" y2="-2"/>
          </g>
          <!-- Tusks (ivory white) -->
          <path d="M-115,-8 Q-122,10 -118,30" stroke="#f0e8d0" stroke-width="9" fill="none" stroke-linecap="round"/>
          <path d="M-110,-8 Q-116,12 -112,32" stroke="#fffde8" stroke-width="6" fill="none" stroke-linecap="round"/>
          <path d="M-100,-8 Q-105,10 -102,28" stroke="#f0e8d0" stroke-width="9" fill="none" stroke-linecap="round"/>
          <path d="M-95,-8 Q-100,12 -97,30" stroke="#fffde8" stroke-width="6" fill="none" stroke-linecap="round"/>
          <!-- Eyes (small, deep-set) -->
          <circle cx="-80" cy="-28" r="6" fill="#1a0a04"/><circle cx="-79" cy="-29" r="2" fill="#3a2a18"/>
          <!-- Nostrils -->
          <ellipse cx="-120" cy="-18" rx="4" ry="3" fill="#3a1808"/>
          <ellipse cx="-112" cy="-18" rx="4" ry="3" fill="#3a1808"/>
          <!-- Flippers -->
          <path d="M80,20 Q105,35 110,55 Q95,55 75,45 Z" fill="#6a3a18"/>
          <path d="M-75,30 Q-95,44 -98,62 Q-82,60 -65,50 Z" fill="#6a3a18"/>
        </g>
        <!-- Sea water lapping shore -->
        <path d="M0,260 Q95,250 190,258 Q285,248 380,255 Q475,246 570,253 Q665,244 760,250 L760,270 Q665,260 570,268 Q475,262 380,270 Q285,264 190,273 Q95,266 0,275 Z" fill="#2a5070" opacity=".5"/>
        <g stroke="#5088aa" stroke-width="1.5" fill="none" opacity=".3"><path d="M0,255 Q380,244 760,252"/></g>
        <!-- Icebergs distant -->
        <polygon points="50,255 70,228 90,255" fill="#b8d4e8" opacity=".6"/>
        <polygon points="650,252 672,226 694,252" fill="#b8d4e8" opacity=".6"/>
        <!-- Seagull -->
        <g fill="#f0f0f0" transform="translate(480,200)">
          <ellipse cx="0" cy="0" rx="18" ry="7"/>
          <path d="M-18,0 Q-28,-8 -38,-4"/><path d="M18,0 Q28,-8 38,-4"/>
          <ellipse cx="-22" cy="-5" rx="12" ry="5" transform="rotate(-20,-22,-5)"/>
          <ellipse cx="22" cy="-5" rx="12" ry="5" transform="rotate(20,22,-5)"/>
        </g>
      </svg>
    </div>
    <div class="ig-15__caption"><h3>Walrus Colony</h3><p>Rocky haul-out, Round Island · Alaska</p></div>
  </div>

  <!-- Slide 6: Atlantic puffin on cliff -->
  <div class="ig-15__slide">
    <div class="ig-15__img">
      <svg viewBox="0 0 760 428" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <linearGradient id="pfg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#2a4a6a"/><stop offset="40%" stop-color="#3a5a80"/><stop offset="70%" stop-color="#5a8aaa"/><stop offset="100%" stop-color="#3a5870"/></linearGradient>
          <filter id="pff"><feGaussianBlur stdDeviation="5"/></filter>
        </defs>
        <rect width="760" height="428" fill="url(#pfg)"/>
        <!-- Ocean waves below -->
        <g stroke="#4a7898" stroke-width="2" fill="none" opacity=".5">
          <path d="M0,380 Q95,368 190,378 Q285,365 380,375 Q475,362 570,372 Q665,360 760,368"/>
          <path d="M0,400 Q95,388 190,398 Q285,386 380,395 Q475,383 570,392 Q665,380 760,388"/>
        </g>
        <!-- Coastal cliff -->
        <path d="M0,0 Q0,200 0,350 L50,350 Q48,200 52,0 Z" fill="#5a4a3a"/>
        <path d="M0,0 L52,0 Q55,200 58,350 L0,350 Z" fill="#6a5a48"/>
        <!-- Cliff face texture strata -->
        <g fill="#4a3a28" opacity=".6"><rect x="0" y="80" width="55" height="6"/><rect x="0" y="145" width="55" height="5"/><rect x="0" y="215" width="55" height="7"/><rect x="0" y="280" width="55" height="5"/></g>
        <!-- Grass on cliff top -->
        <g stroke="#4a8018" stroke-width="2" stroke-linecap="round" fill="none" opacity=".8">
          <line x1="8" y1="0" x2="5" y2="-12"/><line x1="15" y1="0" x2="18" y2="-14"/><line x1="22" y1="0" x2="19" y2="-10"/><line x1="30" y1="0" x2="33" y2="-12"/><line x1="38" y1="0" x2="35" y2="-14"/><line x1="46" y1="0" x2="49" y2="-10"/>
        </g>
        <!-- Sea stretching to horizon -->
        <rect x="55" y="320" width="705" height="108" fill="#2a4a6a" opacity=".8"/>
        <!-- Puffin colony on cliff ledge (multiple birds) -->
        <!-- Puffin (main, large, front-facing) -->
        <g transform="translate(220,200)">
          <!-- Body rounded black -->
          <ellipse cx="0" cy="0" rx="45" ry="55" fill="#1a1a1a"/>
          <!-- White chest/belly -->
          <ellipse cx="0" cy="15" rx="28" ry="35" fill="#f5f5f5"/>
          <!-- Head -->
          <ellipse cx="0" cy="-48" rx="32" ry="28" fill="#1a1a1a"/>
          <!-- White face cheek patches -->
          <ellipse cx="-5" cy="-45" rx="22" ry="16" fill="#f0f0f0"/>
          <!-- Beak (colourful) -->
          <path d="M-8,-38 Q0,-28 8,-38 Q12,-30 8,-22 Q4,-18 0,-20 Q-4,-18 -8,-22 Q-12,-30 -8,-38 Z" fill="#ff6600"/>
          <path d="M-6,-35 Q0,-27 6,-35 Q9,-29 6,-23 Q3,-20 0,-21 Q-3,-20 -6,-23 Q-9,-29 -6,-35 Z" fill="#ffaa00"/>
          <path d="M-5,-33 Q0,-27 5,-33 Q7,-28 5,-24 Q2,-22 0,-22 Q-2,-22 -5,-24 Q-7,-28 -5,-33 Z" fill="#cc4400" opacity=".5"/>
          <!-- Blue/grey beak base -->
          <rect x="-10" y="-40" width="20" height="4" rx="2" fill="#8888aa"/>
          <!-- Eyes (bright orange-red ring) -->
          <circle cx="-15" cy="-50" r="9" fill="#2a1a0a"/>
          <circle cx="-15" cy="-50" r="7" fill="#ff4400" opacity=".8"/>
          <circle cx="-15" cy="-50" r="4" fill="#0a0a0a"/>
          <circle cx="-13" cy="-52" r="2" fill="#fff"/>
          <!-- Webbed feet (orange) -->
          <path d="M-18,52 Q-22,65 -26,68 Q-22,70 -18,65 Q-15,70 -10,65 Q-8,70 -5,65 Q-2,62 -18,52 Z" fill="#ff6600"/>
          <path d="M18,52 Q22,65 26,68 Q22,70 18,65 Q15,70 10,65 Q8,70 5,65 Q2,62 18,52 Z" fill="#ff6600"/>
          <!-- Wing outline visible -->
          <path d="M-40,0 Q-44,30 -40,55 Q-30,58 -18,52" stroke="#0a0a0a" stroke-width="2" fill="none" opacity=".5"/>
        </g>
        <!-- Second puffin (side profile, smaller) -->
        <g transform="translate(340,230) scale(.72)">
          <ellipse cx="0" cy="0" rx="42" ry="50" fill="#1a1a1a"/>
          <ellipse cx="5" cy="12" rx="25" ry="32" fill="#f0f0f0"/>
          <ellipse cx="0" cy="-44" rx="30" ry="26" fill="#1a1a1a"/>
          <ellipse cx="-8" cy="-42" rx="18" ry="14" fill="#f0f0f0"/>
          <path d="M20,-35 Q28,-25 34,-28 Q32,-38 24,-40 Q20,-38 20,-35 Z" fill="#ff6600"/>
          <circle cx="-15" cy="-46" r="6" fill="#ff4400" opacity=".7"/><circle cx="-15" cy="-46" r="3" fill="#0a0a0a"/><circle cx="-13" cy="-47" r="1.2" fill="#fff"/>
          <path d="M-15,48 Q-18,58 -22,62 Q-17,63 -14,58 Q-10,62 -6,58 Q-3,55 -15,48 Z" fill="#ff6600"/>
          <path d="M15,48 Q18,58 22,62 Q17,63 14,58 Q10,62 6,58 Q3,55 15,48 Z" fill="#ff6600"/>
        </g>
        <!-- Third puffin (distant, tiny) -->
        <g transform="translate(120,280) scale(.5)">
          <ellipse cx="0" cy="0" rx="42" ry="50" fill="#1a1a1a"/>
          <ellipse cx="5" cy="12" rx="25" ry="32" fill="#f0f0f0"/>
          <ellipse cx="0" cy="-44" rx="30" ry="26" fill="#1a1a1a"/>
          <ellipse cx="-8" cy="-42" rx="18" ry="14" fill="#f0f0f0"/>
          <path d="M20,-35 Q28,-25 34,-28 Q32,-38 24,-40 Q20,-38 20,-35 Z" fill="#ff6600"/>
          <circle cx="-15" cy="-46" r="6" fill="#ff4400" opacity=".7"/><circle cx="-15" cy="-46" r="3" fill="#0a0a0a"/>
        </g>
        <!-- Flying puffin in distance -->
        <g transform="translate(550,150)" fill="#1a1a1a">
          <ellipse cx="0" cy="0" rx="20" ry="8"/>
          <ellipse cx="-22" cy="-4" rx="22" ry="7" transform="rotate(-20,-22,-4)"/>
          <ellipse cx="22" cy="-4" rx="22" ry="7" transform="rotate(20,22,-4)"/>
          <ellipse cx="0" cy="-6" rx="10" ry="9"/>
        </g>
        <!-- Sea spray -->
        <g fill="#88c8e8" opacity=".4" filter="url(#pff)"><ellipse cx="400" cy="395" rx="80" ry="18"/><ellipse cx="600" cy="405" rx="60" ry="14"/></g>
        <!-- Distant sea cliffs -->
        <g fill="#4a6070" opacity=".4"><polygon points="550,320 590,265 630,320"/><polygon points="610,320 652,270 694,320"/><polygon points="680,320 718,278 756,320"/></g>
        <!-- White-capped waves -->
        <g stroke="#88c8e8" stroke-width="2.5" fill="none" opacity=".4"><path d="M60,355 Q115,345 170,355"/><path d="M280,360 Q335,350 390,360"/><path d="M490,355 Q545,345 600,355"/><path d="M650,362 Q705,352 760,362"/></g>
      </svg>
    </div>
    <div class="ig-15__caption"><h3>Atlantic Puffins</h3><p>Sea-cliff colony, Látrabjarg · Iceland</p></div>
  </div>

  <!-- Nav -->
  <button class="ig-15__nav ig-15__nav--prev" id="ig-15-prev">&#8249;</button>
  <button class="ig-15__nav ig-15__nav--next" id="ig-15-next">&#8250;</button>
  <div class="ig-15__dots" id="ig-15-dots">
    <div class="ig-15__dot ig-15--on"></div><div class="ig-15__dot"></div><div class="ig-15__dot"></div>
    <div class="ig-15__dot"></div><div class="ig-15__dot"></div><div class="ig-15__dot"></div>
  </div>
</div>
<script>
(function(){
  const el=document.getElementById('ig-15');
  if(!el)return;
  const slides=el.querySelectorAll('.ig-15__slide');
  const dots=el.querySelectorAll('.ig-15__dot');
  let cur=0,timer,running=true;
  function go(n){
    slides[cur].classList.remove('ig-15--active');dots[cur].classList.remove('ig-15--on');
    cur=(n+slides.length)%slides.length;
    slides[cur].classList.add('ig-15--active');dots[cur].classList.add('ig-15--on');
  }
  function startAuto(){timer=setInterval(()=>go(cur+1),6000)}
  function stopAuto(){clearInterval(timer)}
  el.querySelector('#ig-15-prev').addEventListener('click',()=>{stopAuto();go(cur-1);startAuto()});
  el.querySelector('#ig-15-next').addEventListener('click',()=>{stopAuto();go(cur+1);startAuto()});
  dots.forEach((d,i)=>d.addEventListener('click',()=>{stopAuto();go(i);startAuto()}));
  el.addEventListener('mouseenter',stopAuto);el.addEventListener('mouseleave',startAuto);
  startAuto();
}());
</script>
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:#040408;font-family:'DM Sans',sans-serif;display:flex;align-items:center;justify-content:center;min-height:100vh;padding:0}
.ig-15{position:relative;width:min(760px,100vw);aspect-ratio:16/9;overflow:hidden;background:#040408}
.ig-15__slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease}
.ig-15__slide.ig-15--active{opacity:1;z-index:1}
.ig-15__slide.ig-15--prev{opacity:0;z-index:0}
.ig-15__img{position:absolute;inset:-8%;width:116%;height:116%;animation:none}
.ig-15--active .ig-15__img{animation:ig-15-zoom 8s ease-in-out forwards}
@keyframes ig-15-zoom{
  0%{transform:scale(1) translate(0,0)}
  100%{transform:scale(1.12) translate(-3%,-2%)}
}
.ig-15__img svg{width:100%;height:100%;display:block}
.ig-15__caption{position:absolute;bottom:0;left:0;right:0;z-index:3;padding:2rem 2.5rem 1.5rem;background:linear-gradient(to top,rgba(4,4,8,.9) 0%,rgba(4,4,8,.5) 50%,transparent);pointer-events:none}
.ig-15__caption h3{font-family:'Playfair Display',serif;color:#fff;font-size:clamp(1.1rem,3vw,1.6rem);font-weight:700;margin-bottom:.3rem}
.ig-15__caption p{color:rgba(255,255,255,.55);font-size:clamp(.68rem,1.8vw,.82rem);font-style:italic;font-family:'Playfair Display',serif}
.ig-15__dots{position:absolute;bottom:1rem;right:1.5rem;z-index:5;display:flex;gap:.5rem;align-items:center}
.ig-15__dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.3);cursor:pointer;transition:background .3s,transform .3s}
.ig-15__dot.ig-15--on{background:#fff;transform:scale(1.4)}
.ig-15__nav{position:absolute;top:50%;z-index:5;transform:translateY(-50%);background:rgba(255,255,255,.1);border:none;color:rgba(255,255,255,.7);width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:1.2rem;backdrop-filter:blur(6px);transition:background .2s;display:flex;align-items:center;justify-content:center}
.ig-15__nav:hover{background:rgba(255,255,255,.22)}
.ig-15__nav--prev{left:1rem}
.ig-15__nav--next{right:1rem}
@media(prefers-reduced-motion:reduce){.ig-15__img{animation:none!important}.ig-15__slide,.ig-15__dot{transition:none}}
(function(){
  const el=document.getElementById('ig-15');
  if(!el)return;
  const slides=el.querySelectorAll('.ig-15__slide');
  const dots=el.querySelectorAll('.ig-15__dot');
  let cur=0,timer,running=true;
  function go(n){
    slides[cur].classList.remove('ig-15--active');dots[cur].classList.remove('ig-15--on');
    cur=(n+slides.length)%slides.length;
    slides[cur].classList.add('ig-15--active');dots[cur].classList.add('ig-15--on');
  }
  function startAuto(){timer=setInterval(()=>go(cur+1),6000)}
  function stopAuto(){clearInterval(timer)}
  el.querySelector('#ig-15-prev').addEventListener('click',()=>{stopAuto();go(cur-1);startAuto()});
  el.querySelector('#ig-15-next').addEventListener('click',()=>{stopAuto();go(cur+1);startAuto()});
  dots.forEach((d,i)=>d.addEventListener('click',()=>{stopAuto();go(i);startAuto()}));
  el.addEventListener('mouseenter',stopAuto);el.addEventListener('mouseleave',startAuto);
  startAuto();
}());

How this works

The Ken Burns effect uses a CSS @keyframes ig-15-zoom that moves from scale(1) translate(0,0) to scale(1.12) translate(-3%,-2%) over 8 seconds with ease-in-out timing. The animation only fires when the .ig-15--active class is present — each slide's .ig-15__img applies the animation only via .ig-15--active .ig-15__img. Removing and re-adding the class resets the animation.

JavaScript manages slide transitions: the active class moves between slides on a 6-second interval, with dot clicks and prev/next buttons allowing manual control. Hover pauses the auto-advance via clearInterval. The slide crossfade uses CSS opacity: 0 → 1 transitions with an 0.8s ease on .ig-15__slide.

Customize

  • Change the zoom magnitude by editing scale(1.12) in the keyframe — values between 1.06 and 1.18 give a range from subtle to dramatic Ken Burns.
  • Alter the pan direction by changing the translate(-3%,-2%) — try translate(3%,2%) to pan bottom-right instead of top-left.
  • Adjust auto-advance speed by changing 6000 in setInterval — the slide duration and animation should ideally match or the zoom won't complete before transition.
  • Add a caption fade-in animation by adding animation: ig-15-caption-in .6s .4s ease both with a keyframe that starts from translateY(8px) opacity(0).
  • Change the crossfade from opacity to a slide-in by replacing the opacity transition with transform: translateX(-100%) → 0 on the active slide.

Watch out for

  • The Ken Burns animation must be removed and re-applied to restart — simply toggling a class off and on in the same JavaScript frame may not trigger the animation restart. Use a requestAnimationFrame delay or force a reflow with void el.offsetWidth between toggle.
  • The @keyframes pan direction needs to stay within the -8% overflow set on the .ig-15__img element — if the translate exceeds the padding, the edge of the image will become visible.
  • Slides with position: absolute stack on top of each other — ensure z-index is managed so the fading-out slide (z-index: 0) sits below the incoming active slide (z-index: 1).

Browser support

ChromeSafariFirefoxEdge
43+ 9+ 16+ 43+

CSS animations and keyframes broadly supported; CSS aspect-ratio on the container needs Chrome 88+, Safari 15+.

More from 16 CSS Image Gallery Designs

CSS Lightbox Gallery OverlayCSS Tilt Parallax Image CardsCSS Filmstrip Carousel GalleryCSS Metro Tile Grid GalleryCSS 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 Viewer
View the full collection →

Search CodeFronts

Loading…

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