Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

NFT preview card component

@andykallian

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I've used an image with a cyan background with a view symbol in it center with opacity 0, then when "hovered", it change to opacity 0.4. I'm sure that its not the best solution, but that was what i've tried.

Community feedback

Lucas 👾 104,580

@correlucas

Posted

👾Fala Anderson, beleza?

Acabei de ver sua solução, e achei bem criativa, mas não seria a melhor forma de fazer esse efeito. Uma vez que você carregou duas imagens diferentes, seu site ficaria mais pesado, fazendo o efeito puxando o efeito somente com código deixaria tudo mais leve.

Vou te deixar aqui o passo a passo pra aplicar esse efeito com toda documentação: https://www.w3schools.com/howto/howto_css_image_overlay.asp

Caso você queira ver a estrutura do código, pode dar uma olhada na minha solução, eu criei o efeito seguindo link que te mandei no paragrafo anterior:

https://www.frontendmentor.io/solutions/nft-preview-card-vanilla-css-custom-design-and-hover-effects-b8D1k9PDmX

Depois em conta se funcionou ok?

Abraço e continue codando!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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