Photos Pinch
Pantone color-of-the-year swatches — Mustard Yellow, Tangerine, Ultra Violet, Classic Blue. Click any swatch to pull it forward.
Photos Pinch the 12th of 22 designs in the 22 CSS Stacked Card Designs collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<div class="scd-photo">
<input type="radio" name="scd-photo" id="scd-photo-1" checked />
<input type="radio" name="scd-photo" id="scd-photo-2" />
<input type="radio" name="scd-photo" id="scd-photo-3" />
<input type="radio" name="scd-photo" id="scd-photo-4" />
<label for="scd-photo-1" class="scd-photo__c" data-i="0" style="--bg: #e8b03e"
><span class="scd-photo__num">PMS 7549</span><span class="scd-photo__nm">Mustard</span></label
>
<label for="scd-photo-2" class="scd-photo__c" data-i="1" style="--bg: #dd5a2c"
><span class="scd-photo__num">17-1463</span><span class="scd-photo__nm">Tangerine</span></label
>
<label for="scd-photo-3" class="scd-photo__c" data-i="2" style="--bg: #5f4b8b"
><span class="scd-photo__num">18-3838</span
><span class="scd-photo__nm">Ultra Violet</span></label
>
<label for="scd-photo-4" class="scd-photo__c" data-i="3" style="--bg: #0f4c81"
><span class="scd-photo__num">19-4052</span
><span class="scd-photo__nm">Classic Blue</span></label
>
</div> .scd-photo { position: relative; width: 240px; height: 180px; margin: 0 auto; }
.scd-photo > input { display: none; }
.scd-photo__c {
position: absolute; left: 50%; top: 50%;
width: 92px; height: 132px; margin: -66px 0 0 -46px;
background: #fafaf5;
border-radius: 2px;
cursor: pointer;
box-shadow: 0 8px 18px -6px rgba(0,0,0,0.35);
transition: transform .45s cubic-bezier(.3,1,.3,1), box-shadow .4s;
z-index: calc(10 - var(--i));
display: flex; flex-direction: column;
overflow: hidden;
}
.scd-photo__c::before {
content: '';
display: block;
height: 86px;
background: var(--bg);
}
.scd-photo__num {
font: 700 9px/1 ui-monospace, monospace;
color: #1a1a1a; padding: 8px 10px 2px;
letter-spacing: 0.06em;
}
.scd-photo__nm {
font: 800 11px/1 system-ui, sans-serif;
color: #1a1a1a; padding: 0 10px;
letter-spacing: 0.02em;
}
.scd-photo__c[data-i="0"] { transform: translateX(-78px) translateY(8px) rotate(-12deg); }
.scd-photo__c[data-i="1"] { transform: translateX(-26px) translateY(-4px) rotate(-4deg); }
.scd-photo__c[data-i="2"] { transform: translateX(26px) translateY(-4px) rotate(4deg); }
.scd-photo__c[data-i="3"] { transform: translateX(78px) translateY(8px) rotate(12deg); }
#scd-photo-1:checked ~ [data-i="0"],
#scd-photo-2:checked ~ [data-i="1"],
#scd-photo-3:checked ~ [data-i="2"],
#scd-photo-4:checked ~ [data-i="3"] {
transform: translate(0, 0) rotate(0) scale(1.08);
z-index: 20;
box-shadow: 0 16px 36px -10px rgba(0,0,0,0.5);
}