ARTICLE AD BOX
I'm trying to create a hand of cards effect where the cards overlap each other, similar to how cards look when you're holding them in your hands.
I'm using a flex container to center the cards horizontally. However, when I use negative margins to make them overlap, the group stops centering correctly and the cards drift to the right instead of staying centered.
negative gap didn't make them overlap.
What I want
The cards should overlap The entire overlapping group should stay perfectly centered in the container.
.container {
width: 300px;
height: 150px;
border: 2px solid white;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
/* gap: -40px; */
/* gap does not work for some reason!*/
}
.card {
height: 100px;
width: 65px;
margin-right: -50px;
}
html,
body {
height: 100%;
background-color: #000;
}
<div class="container">
<div class="hand">
<img src="https://andrewthamcc.github.io/blackjack2.0/assets/facedown.png" class="card">
<img src="https://andrewthamcc.github.io/blackjack2.0/assets/facedown.png" class="card">
<img src="https://andrewthamcc.github.io/blackjack2.0/assets/facedown.png" class="card">
<img src="https://andrewthamcc.github.io/blackjack2.0/assets/facedown.png" class="card">
<img src="https://andrewthamcc.github.io/blackjack2.0/assets/facedown.png" class="card">
<img src="https://andrewthamcc.github.io/blackjack2.0/assets/facedown.png" class="card">
<img src="https://andrewthamcc.github.io/blackjack2.0/assets/facedown.png" class="card">
<img src="https://andrewthamcc.github.io/blackjack2.0/assets/facedown.png" class="card">
</div>
</div>
