|NFT Preview Card for Marketplaces|

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  Oi Lucas, acabei de ver sua solução e vou deixar uma dica sobre a imagem:

  A imagem está distorcendo e é facil de resolver isso, primeiro vc tem que remover as alturas e larguras que vc definiu com vh. Vou te mostrar um metodo usando só a largura e altura vem em automatico.

  Pra fazer com que a imagem pegue a lagura total do container menos o padding, vc precisa colocar display: block e max-width: 100% desse jeito ela cresce o tamanho do container e ajusta de acordo com o tamanho dele.

  img {
      display: block;
         max-width: 100%;
  }
  

  Remover essas:

  @media screen and (min-width: 280px)
  .main__nft-card--image {
      /* width: calc(80vw - 1.5em); */
      /* height: 40vh; */
  }
  
  .main__nft-card--image {
      /* width: calc(20vw - 2em); */
      /* height: 45vh; */
      border-radius: 5px;
      border: dotted 1px hsl(217, 54%, 11%);
      align-self: center;
  }
  

  Pra fazer o hover com icone um bom tutorial pra entender o processo é esse aqui: https://www.w3schools.com/howto/howto_css_image_overlay.asp

  Aqui minha solução caso vc queira usá-la pra referencia do hover effect com icone: https://www.frontendmentor.io/solutions/nft-preview-card-vanilla-css-custom-design-and-hover-effects-b8D1k9PDmX

  1