Design comparison
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
- @correlucasPosted over 2 years ago
👾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-b8D1k9PDmXDepois em conta se funcionou ok?
Abraço e continue codando!
0
Please log in to post a comment
Log in with GitHub
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