Fazer sobreposição com destaque

[samim_fla_df 0]

Estou fazendo um site para uma equipe de futsal local, e pretendo fazer na página do elenco com que os jogadores sejam apresentados como "cards" (semelhante aos cards de jogadores do FIFA Ultimate Team)

Inicialmente achei o efeito que queria no "shareaholic" (site de códigos de compartilhamento), porém não achei o código fonte que eles usam para fazer isso (no caso, o efeito é chamado "Diglett"). Porém depois de horas de pesquisa não achei nada parecido com o "Diglett", e parti para um código próximo. A idéia é a seguinte:



Obs.: A carta subiria (no mouseover) e ficaria em destaque e desceria (no mouseout). Nos dois casos ela teria um delay suave
Obs 2.: No estado "normal" todas terão opacidade de 0.5, e fundo cinza para esconder o que seria a frente da carta

O código mais próximo que achei foi esse aqui. Infelizmente não manjo tanto de JS, mas no caso do CSS já sei o que fazer pra ficar como quero

Parece um efeito simples, mas me complicou...

[Marlon Pacheco 132]

Mais ou menos isso ??

http://codepen.io/marlonlp/pen/atdpB

[samim_fla_df 0]

O código me ajudou bastante e já modifiquei a meu gosto

 

Agora tenho um novo problema...

 

Os cards quando na função "normal" deve mostrar apenas o fundo dele, porém ele exibe as informações que estão no verso do card.

 

Eu queria esconder as informações, e só exibi-las na hora do "hover"

 

Consegui esconder as informações com "visibility: hidden", mas não consigo fazê-los aparecer durante o hover

 

Já está assim

[rikaschmitt 54]

talvez usar um "display:none" para esconder e depois um "display;block" para aparecer..

 

? :P

[samim_fla_df 0]

talvez usar um "display:none" para esconder e depois um "display;block" para aparecer..

 

? :P

Nope, sem resultado

[rikaschmitt 54]

e tentar mexer na opacidade dos elementos?

[Marlon Pacheco 132]

O link que você passou deu 404 pra mim.

Já tentou com o backface-visibility:hidden; ??

http://www.w3schools.com/cssref/css3_pr_backface-visibility.asp

[samim_fla_df 0]

O link que você passou deu 404 pra mim.

Já tentou com o backface-visibility:hidden; ??

http://www.w3schools.com/cssref/css3_pr_backface-visibility.asp

Corrigi o link, e o "backface-visibilty" não consegui entender a função dele

 

Parece tão simples o que quero fazer, mas tá tenso...

[Marlon Pacheco 132]

Acho que seria isso??

http://codepen.io/marlonlp/pen/atdpB

[samim_fla_df 0]

Acho que seria isso??

http://codepen.io/marlonlp/pen/atdpB

É quase isso, no caso eu coloquei um tipo de "barra" cobrindo uma metade do card para representar um tipo de "caixa" ou "baralho"

 

Durante o "hover", o card vira de frente, e exibe as informações de nome, idade, altura e peso do atleta, quando se tira o mouse (mouseout), o card volta para o ponto inicial. Porém durante o hover não estou conseguindo mostrar as infos na frente do card

 

Exemplo: Card (Costas) [normal] -> Card (Frente) + Infos [hover] -> Card (Costas) [mouseout]

 

Já consegui encaixar as informações do jeito que quero, só falta exibi-las durante o hover, porque no normal já consegui esconder

 

Será que com JS daria pra fazer isso?

[Marlon Pacheco 132]

Não consegui colocar as imagens

http://codepen.io/marlonlp/pen/pLvew

[samim_fla_df 0]

Não consegui colocar as imagens

http://codepen.io/marlonlp/pen/pLvew

Valeu pela ajuda, mas acho que não tem solução por enquanto, e não posso demorar pra resolver isso.

Em todo caso, vou criar uma classe pra cada jogador e puxa-lo de um arquivo externo, por hora.

É um pouco mais demorado, mas qdo eu encontrar a solução é só deslinkar