Curved hand
total = 10
for i in (1)..(total)
#playContainer .card[data-location="me-hand"]
&[data-cardcount=\"{i}\"]
color blue
for o in (0)..(i - 1)
rotationRange = 30
rotation = (o - (i - 1) / 2) / (i - 2) * rotationRange
offsetRange = 30
offset = abs((o - (i - 1) / 2) / (i - 2) * offsetRange)
&[data-posx=\"{o}\"]
color red
.card-inner
transform: translateY(offset * 1px) rotate(rotation * 1deg)
backface-visibility: hidden
&:hover
.card-inner
transform: translateY(-2rem) rotate(0deg)
transition-duration: 450ms
z-index: 12
.property.name
//display: block
&:after
animation: fade 450ms ease-out forwards
z-index 13
&:after
top: -175px
@keyframes fade
0%
opacity: 0.9
transform: scale(1)
100%
opacity: 0
transform: scale(1.15)
Just to help you get started, does not fully have good UX.
Copy this to the bottom of your CSS.