Design comparison
Community feedback
- @imadvvPosted over 2 years ago
Greetings Rony dos Santos Oliveira!! Congratulations on completing Your challenge!, 👏👏👏. Well done
I did some changes to your code to add the overlay image, Hope you found it useful.
index.html line 19
<div class="image-wrapper"> <img class="card-image" src="images/image-equilibrium.jpg" alt="Equilibrium"> <img class="icon-view" src="./images/icon-view.svg" alt=""> </div>
style.css line 18
.image-wrapper { position: relative; background-color: hsl(178, 100%, 50%); overflow: hidden; border-radius: 7px; z-index: 1; } .icon-view { position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%,-50%); opacity: 0; visibility: hidden; transition: all 300ms ease-in; } .card-image { width: 100%; display: block; cursor: pointer; transition: all 300ms ease-in-out; } .image-wrapper:hover .card-image { opacity: 0.65; transform: rotate(360deg) scale(1.25); } .image-wrapper:hover .icon-view { opacity: 1; visibility: visible; } /* and here you have it, play around with snippet and take what work's well for you*/
Happy Codding, And Have a Good Day/Night
Marked as helpful2 - @correlucasPosted over 2 years ago
👾Fala Rony, tudo bem? Parabéns pelo desafio!
Esse desafio é meio complicado, quando eu fiz ele segui um tutorial pra aplicar efeito de hover com o icone, vou te passar alguns links pra te ajudar construir o efeito.
Esse aqui ensina fazer qualquer hover com o icone:
https://www.w3schools.com/howto/howto_css_image_overlay_icon.asp
Aqui o link da minha solucao pra vc ver a estrutura html/css do hover: https://www.frontendmentor.io/solutions/nft-preview-card-vanilla-css-custom-design-and-hover-effects-b8D1k9PDmX
👋 Espero ter ajudado e continue no foco!
Marked as helpful2@OliveiraRonyPosted over 2 years ago@correlucas Valeu, Lucas! Vou dar uma olhada e logo mais estarei atualizando a solução.
1 - @PhoenixDev22Posted over 2 years ago
Hello Rony dos Santos Oliveira,
Congratulation on completing another frontend mentor challenge.
**Excellent work! I see you have received some incredible feedback. I have few more suggestions if you don't mind:
- The most important part in this challenge is the interactive element. Since there's a :hover state on the image and means it's interactive, So there should be an interactive element around it. When you create a component that could be interacted with a user , always remember to include interactive elements like(button, textarea,input, ..) For this imagine what would happen when you click on the image, there are two possible ways:
1: If clicking the image would show a popup where the user can see the full NFT, here you use
<button>
.2:If clicking the image would navigate the user to another page to see the NFT, here use
<a>
.-You should have used
<a>
to wrapEquilibrium #3429 and Jules Wyvern
too.- The link wrapping the equilibrium image (
image-equilibrium
) should either haveSr-only
text, anaria-label
that indicates where the link navigate the user(not describes the image).
- If you wish to draw a horizontal line, you should do so using appropriate CSS. Remove the
<span class="line"> </span>
, you can useborder-top:
to the avatar's part.
- To use more semantic tags , you may use
<figure>
and<figcaption>
for the avatar's part.
Aside these, your code is clean and manageable. Hopefully this feedback helps.
Marked as helpful1 - @AdrianoEscarabotePosted over 2 years ago
Eae Rony, tudo bom?
Você realizou um bom trabalho neste desafio. Mas tenho algumas dicas que você pode gostar:
1-colocar um padding lateral no body para que quando a resolução da tela estiver menor o conteúdo não fique batendo na borda.
2- Você falou que teve dúvida de como fazer o hover com outra imagem, vou te dar uma dica de como fiz e na minha opinião é o modo mais fácil.
Primeiro você iria colocar uma div em volta da imagem principal e depois iria adicionar uma
background-image
direto no css com a imagem que ficará por trás, você colocará umaopacity: 0;
. Com o hover você adicionará ela dessa forma:.div-daImgPrincipal:hover>.imgSecundária {opacity: 1;}
ai você estiliza dessa forma:
#nft-image:hover { -shadow: 0 320px hsla(178, 100%, 50%, .5) inset; }
É só isso mesmo, lembro que tive dúvidas de como iria fazer isso, passei uma boa duas horas quebrando a cabeça e passando raiva ahauhuahahuh
Espero que ajude... não esqueça de marcar como útil 👍
Marked as helpful1@OliveiraRonyPosted over 2 years ago@AdrianoEscarabote Valeu, Adriano! Vou procurar entender direitinho como tudo funciona pra conseguir aplicar de forma mais fácil.
0
Please log in to post a comment
Log in with GitHubJoin 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