16 CSS Image Gallery Designs 11 / 16

CSS Diagonal Slice Reveal Gallery

Six before/after pairs where hovering sweeps a skewed clip-path divider from center to edge, revealing the second scene behind the first.

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

The code

<div class="ig-11">
  <div class="ig-11__grid">

    <!-- Slice 1: Forest Spring vs Winter -->
    <div class="ig-11__slice">
      <div class="ig-11__under">
        <svg viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
          <defs><linearGradient id="spg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#a8d8a8"/><stop offset="100%" stop-color="#68a868"/></linearGradient><filter id="spf"><feGaussianBlur stdDeviation="2"/></filter></defs>
          <rect width="250" height="250" fill="url(#spg)"/>
          <!-- Spring forest: light green, blossom -->
          <g fill="#3a7a18"><rect x="15" y="120" width="12" height="130"/><rect x="60" y="105" width="14" height="145"/><rect x="110" y="118" width="12" height="132"/><rect x="158" y="108" width="14" height="142"/><rect x="200" y="115" width="12" height="135"/></g>
          <g filter="url(#spf)"><ellipse cx="21" cy="108" rx="32" ry="24" fill="#5aaa28" opacity=".9"/><ellipse cx="67" cy="92" rx="36" ry="28" fill="#6acc30" opacity=".88"/><ellipse cx="116" cy="105" rx="32" ry="24" fill="#5aaa28" opacity=".88"/><ellipse cx="165" cy="95" rx="36" ry="26" fill="#7acc38" opacity=".9"/><ellipse cx="206" cy="102" rx="30" ry="22" fill="#5aaa28" opacity=".85"/></g>
          <!-- Blossoms -->
          <g filter="url(#spf)" opacity=".5"><circle cx="21" cy="98" rx="18" ry="14" fill="#f8d0e0"/><circle cx="67" cy="82" rx="20" ry="15" fill="#fad8e8"/><circle cx="165" cy="85" rx="22" ry="16" fill="#f8d0e0"/></g>
          <!-- Ground flowers -->
          <g fill="#ffdd20" opacity=".7"><circle cx="30" cy="240" r="4"/><circle cx="80" cy="235" r="3.5"/><circle cx="140" cy="242" r="4"/><circle cx="190" cy="238" r="3.5"/><circle cx="230" cy="244" r="4"/></g>
          <!-- Ground -->
          <rect x="0" y="230" width="250" height="20" fill="#5a8a28" opacity=".7"/>
          <!-- Sun -->
          <circle cx="200" cy="30" r="22" fill="#fff5a0" opacity=".9"/><circle cx="200" cy="30" r="17" fill="#ffee80"/>
          <!-- Birds -->
          <g stroke="#1a1a14" stroke-width="1.5" fill="none"><path d="M70,50 Q76,45 82,50"/><path d="M95,38 Q101,33 107,38"/></g>
        </svg>
      </div>
      <div class="ig-11__over">
        <svg viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
          <defs><linearGradient id="wng" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#9ab8d8"/><stop offset="100%" stop-color="#c8d8e8"/></linearGradient><filter id="wnf"><feGaussianBlur stdDeviation="3"/></filter></defs>
          <rect width="250" height="250" fill="url(#wng)"/>
          <!-- Winter: bare dark trees, snow -->
          <g fill="#1a1410"><rect x="15" y="80" width="12" height="170" rx="3"/><rect x="60" y="65" width="14" height="185" rx="3"/><rect x="110" y="78" width="12" height="172" rx="3"/><rect x="158" y="68" width="14" height="182" rx="3"/><rect x="200" y="75" width="12" height="175" rx="3"/></g>
          <!-- Bare branches -->
          <g stroke="#1a1410" stroke-width="3" fill="none" stroke-linecap="round"><path d="M21,80 Q10,55 5,35 M21,90 Q35,65 45,42 M21,100 Q5,85 -2,70"/><path d="M67,65 Q55,40 50,18 M67,75 Q82,48 90,28 M67,85 Q50,72 42,60"/><path d="M164,68 Q152,42 148,20 M164,78 Q178,52 188,32 M164,88 Q148,75 140,62"/></g>
          <!-- Snow on branches -->
          <g fill="#fff" opacity=".8" filter="url(#wnf)"><rect x="2" y="34" width="18" height="4" rx="2"/><rect x="36" y="40" width="16" height="4" rx="2"/><rect x="48" y="17" width="14" height="4" rx="2"/><rect x="145" y="19" width="14" height="4" rx="2"/><rect x="183" y="31" width="16" height="4" rx="2"/></g>
          <!-- Snow ground -->
          <path d="M0,215 Q62,205 125,212 Q187,205 250,210 L250,250 L0,250 Z" fill="#e8f0f8"/>
          <path d="M0,228 Q62,220 125,225 Q187,220 250,224 L250,250 L0,250 Z" fill="#f0f8ff"/>
          <!-- Snowflakes falling -->
          <g fill="#fff" opacity=".7"><circle cx="25" cy="130" r="2"/><circle cx="80" cy="115" r="2.5"/><circle cx="145" cy="140" r="2"/><circle cx="195" cy="125" r="2.5"/><circle cx="60" cy="175" r="2"/><circle cx="175" cy="185" r="2.5"/></g>
          <!-- Dark sky hint -->
          <rect x="0" y="0" width="250" height="30" fill="#6a88a8" opacity=".3"/>
        </svg>
      </div>
      <div class="ig-11__divider"></div>
      <div class="ig-11__label"><span class="ig-11__label-a">Spring</span><span class="ig-11__label-b">Winter</span></div>
    </div>

    <!-- Slice 2: Autumn vs Dawn -->
    <div class="ig-11__slice">
      <div class="ig-11__under">
        <svg viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
          <defs><linearGradient id="atg2" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#c87020"/><stop offset="50%" stop-color="#e89030"/><stop offset="100%" stop-color="#f5b840"/></linearGradient><filter id="atf2"><feGaussianBlur stdDeviation="2"/></filter></defs>
          <rect width="250" height="250" fill="url(#atg2)"/>
          <!-- Autumn: fiery orange trees -->
          <g fill="#5a2808"><rect x="15" y="115" width="14" height="135"/><rect x="65" y="100" width="16" height="150"/><rect x="115" y="112" width="14" height="138"/><rect x="165" y="102" width="15" height="148"/><rect x="210" y="110" width="14" height="140"/></g>
          <g filter="url(#atf2)"><ellipse cx="22" cy="100" rx="36" ry="26" fill="#c84010" opacity=".9"/><ellipse cx="73" cy="84" rx="40" ry="30" fill="#e06018" opacity=".88"/><ellipse cx="122" cy="98" rx="36" ry="26" fill="#d05014" opacity=".88"/><ellipse cx="172" cy="88" rx="38" ry="28" fill="#e87018" opacity=".9"/><ellipse cx="217" cy="95" rx="34" ry="25" fill="#c84010" opacity=".85"/></g>
          <!-- Brighter canopy layer -->
          <g filter="url(#atf2)"><ellipse cx="22" cy="88" rx="28" ry="20" fill="#f08028" opacity=".7"/><ellipse cx="73" cy="72" rx="32" ry="24" fill="#f09030" opacity=".7"/><ellipse cx="172" cy="76" rx="30" ry="22" fill="#f5a030" opacity=".7"/></g>
          <!-- Falling leaves -->
          <g fill="#e06018" opacity=".75"><ellipse cx="45" cy="155" rx="6" ry="3.5" transform="rotate(25,45,155)"/><ellipse cx="95" cy="165" rx="5" ry="3" transform="rotate(-18,95,165)"/><ellipse cx="145" cy="148" rx="6" ry="3.5" transform="rotate(35,145,148)"/><ellipse cx="195" cy="158" rx="5" ry="3" transform="rotate(-28,195,158)"/><ellipse cx="235" cy="142" rx="6" ry="3.5" transform="rotate(15,235,142)"/></g>
          <!-- Ground leaves -->
          <rect x="0" y="228" width="250" height="22" fill="#8a4810" opacity=".6"/>
          <g fill="#c06020" opacity=".6"><ellipse cx="30" cy="234" rx="8" ry="4" transform="rotate(12,30,234)"/><ellipse cx="80" cy="236" rx="7" ry="3.5" transform="rotate(-15,80,236)"/><ellipse cx="150" cy="232" rx="8" ry="4" transform="rotate(20,150,232)"/><ellipse cx="220" cy="235" rx="7" ry="3.5" transform="rotate(-8,220,235)"/></g>
          <!-- Sunbeam shafts -->
          <g opacity=".12" fill="#ffe080"><polygon points="90,0 120,0 180,250 150,250"/><polygon points="150,0 170,0 220,250 200,250"/></g>
        </svg>
      </div>
      <div class="ig-11__over">
        <svg viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
          <defs><linearGradient id="dng" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#1a0830"/><stop offset="40%" stop-color="#3a1860"/><stop offset="70%" stop-color="#8040a0"/><stop offset="100%" stop-color="#d080c0"/></linearGradient><filter id="dnf"><feGaussianBlur stdDeviation="4"/></filter></defs>
          <rect width="250" height="250" fill="url(#dng)"/>
          <!-- Dawn: purple to pink sky -->
          <!-- Venus / morning star -->
          <circle cx="200" cy="25" r="4" fill="#fff8d0" opacity=".95"/>
          <circle cx="200" cy="25" r="7" fill="#fff8d0" opacity=".3" filter="url(#dnf)"/>
          <!-- Dawn glow on horizon -->
          <ellipse cx="125" cy="175" rx="180" ry="50" fill="#ff8040" opacity=".4" filter="url(#dnf)"/>
          <ellipse cx="125" cy="185" rx="140" ry="30" fill="#ff6020" opacity=".3" filter="url(#dnf)"/>
          <!-- Tree silhouettes (same forest, dawn light) -->
          <g fill="#0a0618"><rect x="15" y="115" width="14" height="135"/><rect x="65" y="100" width="16" height="150"/><rect x="115" y="112" width="14" height="138"/><rect x="165" y="102" width="15" height="148"/><rect x="210" y="110" width="14" height="140"/></g>
          <g fill="#0d081c"><ellipse cx="22" cy="100" rx="36" ry="26"/><ellipse cx="73" cy="84" rx="40" ry="30"/><ellipse cx="122" cy="98" rx="36" ry="26"/><ellipse cx="172" cy="88" rx="38" ry="28"/><ellipse cx="217" cy="95" rx="34" ry="25"/></g>
          <!-- Mist at ground -->
          <rect x="0" y="200" width="250" height="50" fill="#8040a0" opacity=".2" filter="url(#dnf)"/>
          <rect x="0" y="220" width="250" height="30" fill="#d080c0" opacity=".15" filter="url(#dnf)"/>
          <!-- Stars fading -->
          <g fill="#fff" opacity=".6"><circle cx="30" cy="15" r=".9"/><circle cx="70" cy="8" r="1"/><circle cx="115" cy="18" r=".8"/><circle cx="160" cy="10" r=".9"/></g>
          <!-- Owl silhouette on branch -->
          <g fill="#0a0618" transform="translate(50,135)">
            <ellipse cx="0" cy="0" rx="8" ry="10"/><ellipse cx="0" cy="-10" rx="7" ry="7"/>
            <g fill="#0a0618"><polygon points="-6,-16 -3,-8 -6,-8"/><polygon points="6,-16 3,-8 6,-8"/></g>
            <circle cx="-3" cy="-10" r="2.5" fill="#1a0a30"/><circle cx="3" cy="-10" r="2.5" fill="#1a0a30"/>
            <path d="M-8,5 Q-12,8 -14,6" stroke="#0a0618" stroke-width="2" fill="none"/>
            <path d="M8,5 Q12,8 14,6" stroke="#0a0618" stroke-width="2" fill="none"/>
          </g>
        </svg>
      </div>
      <div class="ig-11__divider"></div>
      <div class="ig-11__label"><span class="ig-11__label-a">Autumn</span><span class="ig-11__label-b">Dawn</span></div>
    </div>

    <!-- Slice 3: Summer vs Night -->
    <div class="ig-11__slice">
      <div class="ig-11__under">
        <svg viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
          <defs><linearGradient id="smg2" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#4aa8e0"/><stop offset="50%" stop-color="#88c8f0"/><stop offset="100%" stop-color="#c8e8f8"/></linearGradient><filter id="smf2"><feGaussianBlur stdDeviation="2"/></filter></defs>
          <rect width="250" height="250" fill="url(#smg2)"/>
          <!-- Fluffy summer clouds -->
          <g filter="url(#smf2)"><ellipse cx="60" cy="45" rx="48" ry="22" fill="#fff"/><ellipse cx="85" cy="35" rx="38" ry="18" fill="#fff"/><ellipse cx="45" cy="38" rx="30" ry="15" fill="#fff"/><ellipse cx="195" cy="52" rx="42" ry="19" fill="#fff"/><ellipse cx="215" cy="42" rx="32" ry="16" fill="#fff"/></g>
          <!-- Summer: deep green full canopy -->
          <g fill="#1a5a08"><rect x="15" y="125" width="14" height="125"/><rect x="65" y="108" width="16" height="142"/><rect x="115" y="120" width="14" height="130"/><rect x="165" y="110" width="15" height="140"/><rect x="210" y="118" width="14" height="132"/></g>
          <g filter="url(#smf2)"><ellipse cx="22" cy="108" rx="38" ry="28" fill="#1a6008" opacity=".95"/><ellipse cx="73" cy="90" rx="42" ry="32" fill="#228010" opacity=".93"/><ellipse cx="122" cy="105" rx="38" ry="28" fill="#1a6008" opacity=".93"/><ellipse cx="172" cy="95" rx="40" ry="30" fill="#2a8814" opacity=".95"/><ellipse cx="217" cy="102" rx="36" ry="26" fill="#1a6008" opacity=".90"/></g>
          <!-- Rich top canopy -->
          <g filter="url(#smf2)"><ellipse cx="22" cy="95" rx="30" ry="22" fill="#3aaa20" opacity=".6"/><ellipse cx="73" cy="78" rx="34" ry="25" fill="#42b828" opacity=".6"/><ellipse cx="172" cy="83" rx="32" ry="24" fill="#3aaa20" opacity=".6"/></g>
          <!-- Dappled light on ground -->
          <g fill="#c8e880" opacity=".4"><ellipse cx="40" cy="200" rx="20" ry="8"/><ellipse cx="110" cy="210" rx="18" ry="7"/><ellipse cx="185" cy="205" rx="16" ry="7"/></g>
          <!-- Ground cover -->
          <rect x="0" y="228" width="250" height="22" fill="#2a7014" opacity=".7"/>
          <!-- Sunlight shaft -->
          <polygon points="100,0 130,0 195,250 165,250" fill="#fff8e0" opacity=".06"/>
          <!-- Dragonfly -->
          <g transform="translate(160,155)" fill="#2288aa" opacity=".8">
            <ellipse cx="0" cy="0" rx="1.5" ry="9"/>
            <ellipse cx="-12" cy="-2" rx="14" ry="5" transform="rotate(10,-12,-2)"/>
            <ellipse cx="12" cy="-2" rx="14" ry="5" transform="rotate(-10,12,-2)"/>
            <ellipse cx="-10" cy="4" rx="12" ry="4" transform="rotate(15,-10,4)"/>
            <ellipse cx="10" cy="4" rx="12" ry="4" transform="rotate(-15,10,4)"/>
          </g>
        </svg>
      </div>
      <div class="ig-11__over">
        <svg viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
          <defs><radialGradient id="ntg" cx="50%" cy="50%" r="60%"><stop offset="0%" stop-color="#0d1830"/><stop offset="100%" stop-color="#020508"/></radialGradient><filter id="ntf"><feGaussianBlur stdDeviation="3"/></filter></defs>
          <rect width="250" height="250" fill="url(#ntg)"/>
          <!-- Full moon night forest -->
          <circle cx="125" cy="45" r="30" fill="#fff8e0" opacity=".9"/>
          <circle cx="125" cy="45" r="25" fill="#fffae8"/>
          <g fill="rgba(200,190,160,.3)"><circle cx="115" cy="38" r="5"/><circle cx="132" cy="50" r="4"/></g>
          <!-- Moon glow -->
          <circle cx="125" cy="45" r="55" fill="#ffe8c0" opacity=".12" filter="url(#ntf)"/>
          <!-- Night forest silhouettes -->
          <g fill="#040810"><rect x="15" y="80" width="14" height="170"/><rect x="65" y="65" width="16" height="185"/><rect x="115" y="78" width="14" height="172"/><rect x="165" y="68" width="15" height="182"/><rect x="210" y="75" width="14" height="175"/></g>
          <g fill="#060c18"><ellipse cx="22" cy="65" rx="36" ry="26"/><ellipse cx="73" cy="50" rx="40" ry="30"/><ellipse cx="122" cy="63" rx="36" ry="26"/><ellipse cx="172" cy="53" rx="38" ry="28"/><ellipse cx="217" cy="60" rx="34" ry="25"/></g>
          <!-- Fireflies -->
          <g filter="url(#ntf)"><circle cx="40" cy="155" r="4" fill="#e0ff40" opacity=".85"/><circle cx="88" cy="140" r="4" fill="#c8ff20" opacity=".8"/><circle cx="145" cy="165" r="4" fill="#e0ff40" opacity=".85"/><circle cx="200" cy="148" r="4" fill="#d0ff30" opacity=".82"/><circle cx="65" cy="200" r="3.5" fill="#e0ff40" opacity=".78"/><circle cx="175" cy="195" r="4" fill="#c8ff20" opacity=".8"/></g>
          <!-- Stars -->
          <g fill="#fff" opacity=".7"><circle cx="15" cy="15" r=".9"/><circle cx="45" cy="6" r="1"/><circle cx="80" cy="18" r=".8"/><circle cx="200" cy="10" r=".9"/><circle cx="235" cy="22" r="1"/></g>
          <!-- Ground mist -->
          <rect x="0" y="215" width="250" height="35" fill="#1a3050" opacity=".4" filter="url(#ntf)"/>
          <!-- Fox silhouette -->
          <g fill="#040810" transform="translate(100,220)">
            <ellipse cx="0" cy="0" rx="16" ry="8"/>
            <ellipse cx="-10" cy="-6" rx="8" ry="9"/><ellipse cx="-15" cy="-14" rx="3" ry="4"/>
            <path d="M16,0 Q24,0 28,-5" stroke="#040810" stroke-width="3" fill="none" stroke-linecap="round"/>
            <rect x="-6" y="7" width="4" height="10" rx="2"/><rect x="2" y="7" width="4" height="10" rx="2"/>
            <rect x="-14" y="7" width="4" height="10" rx="2"/><rect x="-10" y="7" width="4" height="10" rx="2"/>
          </g>
        </svg>
      </div>
      <div class="ig-11__divider"></div>
      <div class="ig-11__label"><span class="ig-11__label-a">Summer</span><span class="ig-11__label-b">Night</span></div>
    </div>

    <!-- Slice 4: Misty Morning vs Rain -->
    <div class="ig-11__slice">
      <div class="ig-11__under">
        <svg viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
          <defs><linearGradient id="mmg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#d0e0c8"/><stop offset="100%" stop-color="#e8f0e0"/></linearGradient><filter id="mmf"><feGaussianBlur stdDeviation="5"/></filter></defs>
          <rect width="250" height="250" fill="url(#mmg)"/>
          <!-- Mist layers -->
          <rect x="0" y="140" width="250" height="50" fill="#e8f0e8" opacity=".6" filter="url(#mmf)"/>
          <rect x="0" y="165" width="250" height="50" fill="#f0f8f0" opacity=".55" filter="url(#mmf)"/>
          <rect x="0" y="190" width="250" height="60" fill="#f5faf5" opacity=".6" filter="url(#mmf)"/>
          <!-- Misty forest trees -->
          <g fill="#4a6a38" opacity=".7"><rect x="15" y="90" width="12" height="160"/><rect x="60" y="80" width="14" height="170"/><rect x="108" y="92" width="12" height="158"/><rect x="155" y="82" width="14" height="168"/><rect x="200" y="88" width="12" height="162"/></g>
          <g fill="#5a7a48" opacity=".6" filter="url(#mmf)"><ellipse cx="21" cy="75" rx="34" ry="24"/><ellipse cx="67" cy="62" rx="38" ry="28"/><ellipse cx="114" cy="74" rx="34" ry="24"/><ellipse cx="162" cy="65" rx="36" ry="26"/><ellipse cx="206" cy="72" rx="32" ry="23"/></g>
          <!-- Soft light in mist -->
          <ellipse cx="125" cy="55" rx="90" ry="35" fill="#fffae0" opacity=".2" filter="url(#mmf)"/>
          <!-- Dew drops on grass -->
          <g fill="#88c8e8" opacity=".6"><circle cx="25" cy="238" r="2"/><circle cx="55" cy="240" r="1.5"/><circle cx="90" cy="236" r="2"/><circle cx="130" cy="238" r="2"/><circle cx="165" cy="240" r="1.5"/><circle cx="200" cy="237" r="2"/><circle cx="230" cy="239" r="1.5"/></g>
          <!-- Ground -->
          <rect x="0" y="232" width="250" height="18" fill="#6a9040" opacity=".4"/>
          <!-- Deer silhouette -->
          <g fill="#3a5028" opacity=".6" transform="translate(140,205)">
            <ellipse cx="0" cy="0" rx="16" ry="10"/><ellipse cx="-12" cy="-8" rx="8" ry="10"/>
            <path d="M-16,-10 Q-20,-20 -18,-28 M-16,-10 Q-12,-22 -14,-30" stroke="#3a5028" stroke-width="1.5" fill="none"/>
            <rect x="-4" y="9" width="4" height="14" rx="2"/><rect x="4" y="9" width="4" height="14" rx="2"/><rect x="-14" y="9" width="4" height="14" rx="2"/><rect x="-10" y="9" width="4" height="14" rx="2"/>
          </g>
        </svg>
      </div>
      <div class="ig-11__over">
        <svg viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
          <defs><linearGradient id="rng" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#1a2a1a"/><stop offset="100%" stop-color="#2a3a2a"/></linearGradient><filter id="rnf"><feGaussianBlur stdDeviation="2"/></filter></defs>
          <rect width="250" height="250" fill="url(#rng)"/>
          <!-- Storm clouds -->
          <g fill="#0a1208" opacity=".9"><ellipse cx="60" cy="35" rx="80" ry="38"/><ellipse cx="180" cy="28" rx="70" ry="32"/><ellipse cx="125" cy="20" rx="60" ry="28"/></g>
          <!-- Rain forest: dark green -->
          <g fill="#0d2a08"><rect x="15" y="90" width="12" height="160"/><rect x="60" y="78" width="14" height="172"/><rect x="108" y="92" width="12" height="158"/><rect x="155" y="80" width="14" height="170"/><rect x="200" y="88" width="12" height="162"/></g>
          <g fill="#0d3208"><ellipse cx="21" cy="75" rx="34" ry="24"/><ellipse cx="67" cy="62" rx="38" ry="28"/><ellipse cx="114" cy="74" rx="34" ry="24"/><ellipse cx="162" cy="65" rx="36" ry="26"/><ellipse cx="206" cy="72" rx="32" ry="23"/></g>
          <!-- Heavy rain streaks -->
          <g stroke="rgba(160,200,180,.28)" stroke-width=".8">
            <line x1="10" y1="0" x2="7" y2="250"/><line x1="30" y1="0" x2="27" y2="250"/>
            <line x1="52" y1="0" x2="49" y2="250"/><line x1="75" y1="0" x2="72" y2="250"/>
            <line x1="98" y1="0" x2="95" y2="250"/><line x1="118" y1="0" x2="115" y2="250"/>
            <line x1="140" y1="0" x2="137" y2="250"/><line x1="162" y1="0" x2="159" y2="250"/>
            <line x1="185" y1="0" x2="182" y2="250"/><line x1="208" y1="0" x2="205" y2="250"/>
            <line x1="228" y1="0" x2="225" y2="250"/><line x1="248" y1="0" x2="245" y2="250"/>
          </g>
          <!-- Puddles -->
          <g fill="#1a3a2a" opacity=".6"><ellipse cx="40" cy="238" rx="18" ry="7" filter="url(#rnf)"/><ellipse cx="130" cy="240" rx="22" ry="8" filter="url(#rnf)"/><ellipse cx="210" cy="236" rx="16" ry="6" filter="url(#rnf)"/></g>
          <!-- Lightning -->
          <polyline points="170,0 160,45 172,45 155,90" stroke="#e0f8c0" stroke-width="1.5" fill="none" opacity=".7"/>
          <polyline points="170,0 160,45 172,45 155,90" stroke="#fff" stroke-width=".8" fill="none" opacity=".5"/>
          <!-- Glow from lightning -->
          <ellipse cx="162" cy="45" rx="40" ry="20" fill="#c0e890" opacity=".08" filter="url(#rnf)"/>
        </svg>
      </div>
      <div class="ig-11__divider"></div>
      <div class="ig-11__label"><span class="ig-11__label-a">Morning Mist</span><span class="ig-11__label-b">Storm</span></div>
    </div>

    <!-- Slice 5: Dusk vs Frost -->
    <div class="ig-11__slice">
      <div class="ig-11__under">
        <svg viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
          <defs><linearGradient id="dkg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#1a0a30"/><stop offset="40%" stop-color="#5a1a60"/><stop offset="70%" stop-color="#c04050"/><stop offset="100%" stop-color="#f07040"/></linearGradient><filter id="dkf"><feGaussianBlur stdDeviation="3"/></filter></defs>
          <rect width="250" height="250" fill="url(#dkg)"/>
          <!-- Dusk: purple-red sky -->
          <ellipse cx="125" cy="170" rx="180" ry="50" fill="#ff6030" opacity=".35" filter="url(#dkf)"/>
          <!-- Silhouette forest against sunset -->
          <g fill="#0a0518"><rect x="15" y="100" width="14" height="150"/><rect x="60" y="85" width="16" height="165"/><rect x="110" y="98" width="14" height="152"/><rect x="155" y="88" width="15" height="162"/><rect x="200" y="96" width="14" height="154"/></g>
          <g fill="#100820"><ellipse cx="22" cy="84" rx="36" ry="26"/><ellipse cx="68" cy="68" rx="40" ry="30"/><ellipse cx="117" cy="82" rx="36" ry="26"/><ellipse cx="162" cy="72" rx="38" ry="28"/><ellipse cx="207" cy="80" rx="34" ry="25"/></g>
          <!-- Silhouette reflected in water below -->
          <rect x="30" y="225" width="190" height="25" fill="#2a0a40" opacity=".5"/>
          <g fill="#1a0828" opacity=".4"><ellipse cx="22" cy="236" rx="20" ry="6"/><ellipse cx="68" cy="232" rx="24" ry="8"/><ellipse cx="117" cy="236" rx="20" ry="6"/></g>
          <!-- Bats -->
          <g fill="#0a0518" transform="translate(80,60)"><path d="M0,0 Q-8,8 -14,4 Q-8,0 0,0 Q8,0 14,4 Q8,8 0,0 Z"/><ellipse cx="0" cy="1" rx="3" ry="4"/></g>
          <g fill="#0a0518" transform="translate(170,45)"><path d="M0,0 Q-6,6 -10,3 Q-6,0 0,0 Q6,0 10,3 Q6,6 0,0 Z"/><ellipse cx="0" cy="1" rx="2.5" ry="3.5"/></g>
          <!-- First stars -->
          <g fill="#fff" opacity=".6"><circle cx="30" cy="20" r="1.1"/><circle cx="85" cy="12" r="1"/><circle cx="155" cy="18" r="1.2"/><circle cx="215" cy="10" r="1"/></g>
        </svg>
      </div>
      <div class="ig-11__over">
        <svg viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
          <defs><linearGradient id="frg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#8ab0d0"/><stop offset="50%" stop-color="#b0d0e8"/><stop offset="100%" stop-color="#d0e8f8"/></linearGradient><filter id="frf"><feGaussianBlur stdDeviation="2"/></filter></defs>
          <rect width="250" height="250" fill="url(#frg)"/>
          <!-- Frost/ice forest -->
          <!-- Trees with frost crystals -->
          <g fill="#2a3a2a" opacity=".8"><rect x="15" y="100" width="14" height="150"/><rect x="60" y="85" width="16" height="165"/><rect x="110" y="98" width="14" height="152"/><rect x="155" y="88" width="15" height="162"/><rect x="200" y="96" width="14" height="154"/></g>
          <g fill="#3a4a3a" filter="url(#frf)"><ellipse cx="22" cy="84" rx="36" ry="26"/><ellipse cx="68" cy="68" rx="40" ry="30"/><ellipse cx="117" cy="82" rx="36" ry="26"/><ellipse cx="162" cy="72" rx="38" ry="28"/><ellipse cx="207" cy="80" rx="34" ry="25"/></g>
          <!-- Frost crystals on branches -->
          <g fill="#e0eff8" opacity=".8"><ellipse cx="22" cy="72" rx="28" ry="10"/><ellipse cx="68" cy="56" rx="32" ry="12"/><ellipse cx="117" cy="70" rx="28" ry="10"/><ellipse cx="162" cy="60" rx="30" ry="11"/><ellipse cx="207" cy="68" rx="26" ry="10"/></g>
          <!-- Icicles hanging -->
          <g fill="#c8e0f0" opacity=".7">
            <polygon points="18,85 20,108 22,85"/><polygon points="26,82 28,102 30,82"/>
            <polygon points="65,68 67,90 69,68"/><polygon points="73,65 75,86 77,65"/>
            <polygon points="115,72 117,94 119,72"/><polygon points="160,62 162,84 164,62"/>
            <polygon points="205,70 207,92 209,70"/>
          </g>
          <!-- Snow ground -->
          <path d="M0,218 Q62,208 125,214 Q187,208 250,212 L250,250 L0,250 Z" fill="#e0eef8"/>
          <path d="M0,232 Q62,224 125,228 Q187,224 250,228 L250,250 L0,250 Z" fill="#eef6ff"/>
          <!-- Ice crystals on snow -->
          <g stroke="#b0d0e8" stroke-width=".8" fill="none" opacity=".6">
            <path d="M40,225 L44,221 M40,225 L36,221 M40,225 L40,219 M40,225 L44,229 M40,225 L36,229"/>
            <path d="M120,228 L124,224 M120,228 L116,224 M120,228 L120,222 M120,228 L124,232 M120,228 L116,232"/>
            <path d="M200,226 L204,222 M200,226 L196,222 M200,226 L200,220 M200,226 L204,230 M200,226 L196,230"/>
          </g>
          <!-- Frozen sun pale -->
          <circle cx="125" cy="30" r="24" fill="#d0e8f8" opacity=".8"/>
          <circle cx="125" cy="30" r="18" fill="#e0f0ff" opacity=".9"/>
        </svg>
      </div>
      <div class="ig-11__divider"></div>
      <div class="ig-11__label"><span class="ig-11__label-a">Dusk</span><span class="ig-11__label-b">Deep Frost</span></div>
    </div>

    <!-- Slice 6: Flood vs Drought -->
    <div class="ig-11__slice">
      <div class="ig-11__under">
        <svg viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
          <defs><linearGradient id="flg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#2255aa"/><stop offset="50%" stop-color="#3377cc"/><stop offset="100%" stop-color="#4499dd"/></linearGradient><filter id="flf"><feGaussianBlur stdDeviation="3"/></filter></defs>
          <rect width="250" height="250" fill="url(#flg)"/>
          <!-- Flooded forest: trees half-submerged -->
          <g fill="#1a2808" opacity=".85"><rect x="15" y="140" width="12" height="110"/><rect x="60" y="130" width="14" height="120"/><rect x="108" y="138" width="12" height="112"/><rect x="155" y="132" width="14" height="118"/><rect x="200" y="136" width="12" height="114"/></g>
          <!-- Tree tops above water -->
          <g fill="#2a4010"><ellipse cx="21" cy="120" rx="32" ry="22"/><ellipse cx="67" cy="108" rx="36" ry="26"/><ellipse cx="114" cy="118" rx="32" ry="22"/><ellipse cx="162" cy="110" rx="34" ry="24"/><ellipse cx="206" cy="116" rx="30" ry="21"/></g>
          <g fill="#3a5a18" filter="url(#flf)"><ellipse cx="21" cy="108" rx="24" ry="17"/><ellipse cx="67" cy="96" rx="28" ry="20"/><ellipse cx="114" cy="106" rx="24" ry="17"/></g>
          <!-- Flood water surface -->
          <path d="M0,162 Q62,150 125,158 Q187,150 250,155 L250,200 L0,200 Z" fill="#2255aa" opacity=".9"/>
          <path d="M0,180 Q62,170 125,176 Q187,170 250,174 L250,250 L0,250 Z" fill="#1a4499" opacity=".95"/>
          <!-- Water reflections/ripples -->
          <g stroke="#88aacc" stroke-width="1" fill="none" opacity=".4">
            <path d="M0,168 Q62,160 125,166 Q187,160 250,164"/><path d="M0,185 Q62,178 125,183 Q187,178 250,181"/>
          </g>
          <!-- Submerged fence -->
          <g stroke="#5a3818" stroke-width="2" fill="none" opacity=".4">
            <line x1="0" y1="175" x2="250" y2="175"/>
            <line x1="30" y1="162" x2="30" y2="188"/><line x1="70" y1="162" x2="70" y2="188"/><line x1="110" y1="162" x2="110" y2="188"/><line x1="150" y1="162" x2="150" y2="188"/><line x1="190" y1="162" x2="190" y2="188"/>
          </g>
          <!-- Heron on branch above water -->
          <g fill="#1a1a2a" transform="translate(195,142)">
            <ellipse cx="0" cy="0" rx="5" ry="9"/><ellipse cx="-1" cy="-10" rx="3" ry="5"/>
            <path d="M-4,-10 Q-8,-12 -10,-8" stroke="#1a1a2a" stroke-width="2" fill="none"/><!-- beak -->
            <path d="M0,8 Q2,14 1,20" stroke="#1a1a2a" stroke-width="2.5" fill="none"/><!-- legs in water -->
          </g>
          <!-- Sky with rain hint -->
          <g fill="#6688bb" opacity=".4"><ellipse cx="60" cy="20" rx="60" ry="20"/><ellipse cx="180" cy="15" rx="55" ry="18"/></g>
        </svg>
      </div>
      <div class="ig-11__over">
        <svg viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
          <defs><linearGradient id="drg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#d09020"/><stop offset="50%" stop-color="#c07818"/><stop offset="100%" stop-color="#8a4808"/></linearGradient></defs>
          <rect width="250" height="250" fill="url(#drg)"/>
          <!-- Drought: cracked earth, dead trees -->
          <!-- Cracked earth texture -->
          <g fill="#a06018" opacity=".6">
            <path d="M0,180 Q25,170 50,180 L50,250 L0,250 Z"/>
            <path d="M50,175 Q80,165 110,175 L110,250 L50,250 Z"/>
            <path d="M110,178 Q140,168 170,178 L170,250 L110,250 Z"/>
            <path d="M170,175 Q200,165 230,175 L230,250 L170,250 Z"/>
          </g>
          <!-- Crack lines in earth -->
          <g stroke="#7a3a08" stroke-width="1.5" fill="none" opacity=".7">
            <path d="M20,200 Q30,212 25,230 Q22,242 28,250"/><path d="M55,195 Q65,208 60,225 Q58,238 65,250"/>
            <path d="M95,198 Q105,214 100,232"/><path d="M140,196 Q150,210 145,228 Q142,240 150,250"/>
            <path d="M180,200 Q188,215 184,232"/><path d="M215,198 Q225,212 220,228"/>
            <path d="M10,215 Q40,220 70,215"/><path d="M100,208 Q130,212 160,208"/>
            <path d="M175,215 Q200,220 230,215"/><path d="M40,230 Q75,235 105,228"/>
          </g>
          <!-- Dead trees -->
          <g fill="#3a2008" opacity=".8">
            <rect x="15" y="100" width="12" height="130"/><rect x="60" y="88" width="14" height="142"/>
            <rect x="108" y="98" width="12" height="132"/><rect x="155" y="90" width="15" height="140"/>
            <rect x="200" y="96" width="12" height="134"/>
          </g>
          <!-- Bare dead branches -->
          <g stroke="#3a2008" stroke-width="2.5" fill="none" opacity=".7" stroke-linecap="round">
            <path d="M21,100 Q8,78 4,55 M21,110 Q36,85 44,62 M21,120 Q5,105 0,90"/>
            <path d="M67,88 Q54,65 50,42 M67,98 Q82,73 90,52"/>
            <path d="M162,90 Q150,66 146,44 M162,100 Q176,76 186,56"/>
          </g>
          <!-- Vulture silhouette circling -->
          <g fill="#1a0a04" transform="translate(125,50)">
            <path d="M0,0 Q-15,10 -26,5 Q-18,0 0,0 Q18,0 26,5 Q15,10 0,0 Z"/>
            <ellipse cx="0" cy="1" rx="5" ry="7"/>
            <ellipse cx="0" cy="-3" rx="3" ry="4"/><!-- head -->
          </g>
          <!-- Dry sun bleaching sky -->
          <circle cx="200" cy="32" r="32" fill="#fff080" opacity=".8"/>
          <circle cx="200" cy="32" r="24" fill="#ffee60" opacity=".9"/>
          <!-- Heat haze -->
          <g stroke="#c07018" stroke-width=".8" fill="none" opacity=".2">
            <path d="M0,155 Q62,148 125,154 Q187,148 250,152"/>
            <path d="M0,162 Q62,155 125,161 Q187,155 250,159"/>
          </g>
        </svg>
      </div>
      <div class="ig-11__divider"></div>
      <div class="ig-11__label"><span class="ig-11__label-a">Flood</span><span class="ig-11__label-b">Drought</span></div>
    </div>

  </div>
</div>
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:#0a0a0a;font-family:'DM Sans',sans-serif;display:flex;align-items:center;justify-content:center;min-height:100vh;padding:1.5rem}
.ig-11{width:100%;max-width:760px}
.ig-11__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.ig-11__slice{position:relative;overflow:hidden;border-radius:6px;cursor:pointer;aspect-ratio:1}
.ig-11__under,.ig-11__over{position:absolute;inset:0}
.ig-11__under svg,.ig-11__over svg{width:100%;height:100%;display:block}
.ig-11__over{clip-path:polygon(45% 0,100% 0,100% 100%,55% 100%);transition:clip-path .55s cubic-bezier(.77,0,.18,1)}
.ig-11__slice:hover .ig-11__over{clip-path:polygon(105% 0,100% 0,100% 100%,105% 100%)}
.ig-11__label{position:absolute;bottom:.7rem;left:.75rem;right:.75rem;display:flex;justify-content:space-between;pointer-events:none;z-index:3}
.ig-11__label-a,.ig-11__label-b{color:rgba(255,255,255,.85);font-size:.65rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 1px 4px rgba(0,0,0,.7);transition:opacity .3s}
.ig-11__label-b{text-align:right;opacity:0}
.ig-11__slice:hover .ig-11__label-a{opacity:0}
.ig-11__slice:hover .ig-11__label-b{opacity:1}
.ig-11__divider{position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:none;z-index:2}
.ig-11__divider::after{content:'';position:absolute;top:0;bottom:0;left:44%;width:3px;background:rgba(255,255,255,.9);transform:skewX(-8deg);box-shadow:0 0 12px rgba(255,255,255,.5);transition:left .55s cubic-bezier(.77,0,.18,1)}
.ig-11__slice:hover .ig-11__divider::after{left:99%}
@media(prefers-reduced-motion:reduce){.ig-11__over,.ig-11__divider::after,.ig-11__label-a,.ig-11__label-b{transition:none}}

How this works

Each slice has two absolutely-positioned layers. The "under" layer (before scene) is always visible. The "over" layer (after scene) uses clip-path: polygon(45% 0, 100% 0, 100% 100%, 55% 100%) to show only the right portion, with the left edge angled to create a diagonal seam. A CSS transition: clip-path .55s cubic-bezier(.77,0,.18,1) animates this.

On hover, the polygon becomes polygon(105% 0, 100% 0, 100% 100%, 105% 100%) — moving the clip entirely off-screen to the right. This reveals the under layer completely. The divider line is a ::after pseudo-element with a skewed white strip that follows the same transition, creating the clean blade effect between scenes.

Customize

  • Change the reveal direction from right-to-left to top-to-bottom by using polygon(0 45%, 100% 45%, 100% 100%, 0 100%) as the base clip and animating the Y values on hover.
  • Adjust the diagonal angle by changing the offset between the top clip X (45%) and bottom clip X (55%) — a larger difference creates a steeper diagonal blade.
  • Speed up the reveal by changing the transition duration from .55s to .35s — the easing curve keeps it feeling smooth at higher speeds.
  • Add a label pair for both scenes by animating .ig-11__label-a opacity out and .ig-11__label-b in simultaneously on hover using CSS transitions.
  • Change the divider line from white to a color by editing background: rgba(255,255,255,.9) on .ig-11__divider::after.

Watch out for

  • clip-path: polygon() cannot be transitioned smoothly if the number of points changes between states — always use the same number of polygon points in both the default and hover state.
  • The skewed divider pseudo-element uses skewX(-8deg) — this transform is separate from the clip-path animation and may fall out of sync on very slow transitions; keep both timings identical.
  • On Safari, clip-path transitions can stutter if the clipped element contains SVG with complex filters — simplify or remove feGaussianBlur filters on the over layer for better performance.

Browser support

ChromeSafariFirefoxEdge
55+ 13.1+ 54+ 55+

clip-path polygon transitions require Chrome 55+, Safari 13.1+; polygon clip-path itself has wider support.

More from 16 CSS Image Gallery Designs

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

Search CodeFronts

Loading…

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