Criando uma animacao de Card com Hover

Aprenda a fazer uma animação bem legal utilizar os pseudo-seletores :after e :before

Introdução

Fala pessoal! Continuando as nossas Dicas de CSS, hoje vamos aprender a fazer animação bem legal ao fazer um hover num card. Mas essa animação pode ser feita também em um botão, ícone ou qualquer coisa que tenha uma caixa/borda ao redor.

Para essa animação nós usaremos os pseudo-seletores :after e :before e um pouquinho da mágica do scale.

Você pode ver todo o código da demo aqui e pode ver a demo rodando aqui.

Vídeo

Conclusão

Novamente foi um post/vídeo bastante simples, mas que espero que seja útil para vocês irem aprendendo esses pequenos detalhes. Peço novamente que se puderem, compartilhem com seus amigos e não deixem de se inscrever no canal do YouTube, eu estou começando ainda, então é muito importante que vocês me ajudem nesse início!