Estou criando um CSS que simula cartas de um baralho, com cartas e mãos de carta. Quando uma carta de uma mão for selecionada ela é destacada acima das outras.
Isso funciona bem, porém eu gostaria de aplicar um efeito de transição para quando a carta for destacada. Tentei de algumas formas sem sucesso.
Segue o código abaixo:
HTML:
<body>
<br /><br />
<div class="hand">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</body>
CSS:
.card {
width: 140px;
height: 190px;
border: 1px solid #aaa;
border-radius: 7px;
box-shadow: 0px 0px 2px 0px rgba(50, 50, 50, 0.75);
background: white;
}
.hand {
position: relative;
}
.hand .card {
position: absolute;
transition: top .5s;
}
.hand .card:hover, .hand .card.selected {
top: -2em;
}
.hand .card:nth-child(1) { left: 1.1em; }
.hand .card:nth-child(2) { left: 2.2em; }
.hand .card:nth-child(3) { left: 3.3em; }
.hand .card:nth-child(4) { left: 4.4em; }
.hand .card:nth-child(5) { left: 5.5em; }
.hand .card:nth-child(6) { left: 6.6em; }
.hand .card:nth-child(7) { left: 7.7em; }
.hand .card:nth-child(8) { left: 8.8em; }
.hand .card:nth-child(9) { left: 9.9em; }
Link para o sample no JSFiddle
Esse modelo já estaria OK. O que eu preciso é que o transition funcione com o top, pra que em vez de a carta pular seja exibido um efeito, uma transição, mais suave.