NFT Card HTML + CSS

Community feedback

• 

  imad•3,330

  @imadvvPosted about 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 helpful

  2
• 

  Lucas 👾•104,400

  @correlucasPosted about 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 helpful

  2

  ---

  

  P

  Rony dos Santos Oliveira•60

  @OliveiraRonyPosted about 2 years ago

  @correlucas Valeu, Lucas! Vou dar uma olhada e logo mais estarei atualizando a solução.

  1
• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted about 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 wrap Equilibrium #3429 and Jules Wyvern too.

  • The link wrapping the equilibrium image (image-equilibrium ) should either have Sr-only text, an aria-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 use border-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 helpful

  1
• 

  Adriano•38,080

  @AdrianoEscarabotePosted about 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á uma opacity: 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 helpful

  1

  ---

  

  P

  Rony dos Santos Oliveira•60

  @OliveiraRonyPosted about 2 years ago

  @AdrianoEscarabote Valeu, Adriano! Vou procurar entender direitinho como tudo funciona pra conseguir aplicar de forma mais fácil.

  0