Card deck with hero card demo

<div class="deck">
    <div class="card"><a href="#">Card</a></div>
    <div class="card"><a href="#">Card</a></div>
    <div class="card"><a href="#">Card</a></div>
    <div class="card"><a href="#">Card</a></div>
</div>    

.deck {
    pointer-events: none;
}
.deck:hover .card:not(:hover),
.deck:focus-within .card:not(:focus-within){
    scale: 0.8;
    opacity: 0.3;
}
.card {
    pointer-events: auto;
    transition: scale 300ms, opacity 300ms;
}
.card:hover, .card:focus-within {
    background: skyblue;
    border-color: cornflowerblue;
}
.deck {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
    gap: 3rem;
}