Shuffle Reveal
Three vinyl record sleeves — red, cobalt, and warm-yellow LP covers; hover slides the front sleeve out at an angle to expose the next.
Shuffle Reveal the 10th 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-shuf">
<div class="scd-shuf__c" style="--i: 2; --bg: #cc3232">
<span class="scd-shuf__hole"></span><span class="scd-shuf__label">Side A</span>
</div>
<div class="scd-shuf__c" style="--i: 1; --bg: #1942a3">
<span class="scd-shuf__hole"></span><span class="scd-shuf__label">12" LP</span>
</div>
<div class="scd-shuf__c" style="--i: 0; --bg: #f0c040">
<span class="scd-shuf__hole"></span><span class="scd-shuf__label">33⅓</span>
</div>
</div> .scd-shuf { position: relative; width: 220px; height: 170px; margin: 0 auto; cursor: pointer; }
.scd-shuf__c {
position: absolute; left: 50%; top: 50%;
width: 132px; height: 132px; margin: -66px 0 0 -66px;
background: var(--bg);
border-radius: 4px;
color: #1a1a1a;
display: flex; align-items: center; justify-content: center;
position: absolute;
box-shadow: 0 6px 18px -8px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(0,0,0,0.2);
transform: translateY(calc(var(--i) * -8px)) translateX(calc(var(--i) * -4px));
transition: transform .5s cubic-bezier(.3,1.4,.4,1);
z-index: calc(10 - var(--i));
overflow: hidden;
}
.scd-shuf__c::before {
content: '';
position: absolute; inset: 16px;
background:
radial-gradient(circle at center, #1a1a1a 0%, #1a1a1a 38%, transparent 38.5%),
repeating-radial-gradient(circle at center, #1a1a1a 0 1px, transparent 1px 3px);
border-radius: 50%;
}
.scd-shuf__hole {
position: absolute; top: 50%; left: 50%;
width: 12px; height: 12px; margin: -6px 0 0 -6px;
background: var(--bg); border-radius: 50%;
z-index: 2;
}
.scd-shuf__label {
position: relative; z-index: 3;
font: 800 10px ui-monospace, monospace;
color: var(--bg);
background: #1a1a1a;
padding: 3px 8px; border-radius: 2px;
letter-spacing: 0.14em;
margin-top: 38px;
}
.scd-shuf:hover .scd-shuf__c { transform: translateY(calc((var(--i) - 1) * -8px)) translateX(calc((var(--i) - 1) * -4px)); }
.scd-shuf:hover .scd-shuf__c[style*="--i:0"] { transform: translate(140%, -10px) rotate(16deg); }