Responsive NFT preview card using Flexbox and CSS variables

Solution retrospective
I'm proud of the semantic structure and the responsive layout I achieved with a mobile-first approach. The use of CSS custom properties helped keep the styling clean and maintainable. Next time, I would improve the hover interactions by adding smooth transitions and explore using a CSS overlay icon for the image hover state, just like in the original design.
(pt-BR) Tenho orgulho da estrutura semântica e do layout responsivo que consegui com a abordagem mobile-first. O uso de variáveis CSS ajudou a manter o estilo limpo e fácil de manter. Da próxima vez, eu melhoraria as interações de hover adicionando transições suaves e exploraria o uso de um ícone sobreposto com CSS para o efeito hover da imagem, como no design original.
What challenges did you encounter, and how did you overcome them?Creating the hover overlay effect on the NFT image using only CSS was one of the most interesting challenges. I had to combine ::before
and ::after
pseudo-elements to simulate both the colored overlay and the view icon, then control their visibility with smooth transitions. Another small challenge was keeping the icon and text in the pricing section vertically aligned — Flexbox with align-items: center
and gap
provided a clean and efficient solution without relying on any positional hacks.
(pt-BR)
Criar o efeito de overlay com hover sobre a imagem do NFT usando apenas CSS foi um dos desafios mais interessantes. Precisei combinar os pseudo-elementos ::before
e ::after
para simular tanto a sobreposição colorida quanto o ícone de visualização, controlando a visibilidade de ambos com transições suaves. Outro pequeno desafio foi manter os ícones e os textos na seção de preços alinhados verticalmente — Flexbox com align-items: center
e gap
ofereceu uma solução limpa e eficiente, sem precisar de gambiarras de posicionamento.
I’d appreciate feedback on how to best implement the hover overlay effect on the main image using only CSS. Additionally, suggestions on improving accessibility and keyboard navigation would be welcome.
(pt-BR) Agradeceria sugestões sobre como implementar o efeito de overlay com ícone sobre a imagem principal usando apenas CSS. Além disso, sugestões para melhorar a acessibilidade e a navegação via teclado seriam muito bem-vindas.
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on Carlos Alberto da Silva's solution.
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord