Interactive Wallet Card Stack

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="wallet-503"><div class="card c1"><span>VISA</span></div><div class="card c2"><span>PAYPAL</span></div><div class="card c3"><div class="brand">PAYPAL</div><div class="balance">••••••</div><div class="hint">Hover to see Balance</div></div></div>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.wallet-503 { position: relative; width: 220px; height: 180px; display: flex; align-items: flex-end; justify-content: center; margin: auto; font-family: system-ui, sans-serif; }
.wallet-503 .card { position: absolute; width: 200px; height: 120px; border-radius: 16px; padding: 14px; box-sizing: border-box; color: #fff; font-weight: 700; transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease; box-shadow: 0 10px 25px rgba(0,0,0,0.3); }
.wallet-503 .c1 { background: #6366f1; top: 0; transform: scale(0.88); z-index: 1; }
.wallet-503 .c2 { background: #22c55e; top: 20px; transform: scale(0.94); z-index: 2; }
.wallet-503 .c3 { background: #14532d; top: 40px; z-index: 3; display: flex; flex-direction: column; justify-content: space-between; border: 1px dashed rgba(255,255,255,0.2); }
.wallet-503:hover .c1 { transform: translateY(-30px) scale(0.88); }
.wallet-503:hover .c2 { transform: translateY(-15px) scale(0.94); }
.wallet-503 .brand { font-size: 12px; letter-spacing: 1px; color: #86efac; }
.wallet-503 .balance { font-size: 18px; text-align: center; letter-spacing: 3px; opacity: 0.8; }
.wallet-503 .hint { font-size: 10px; font-style: italic; text-align: center; color: #86efac; font-weight: 400; }