NFT preview card component

Community feedback

• 

  Raphael Bröderbauer•790

  @DigitaleWeltLibraryPosted about 1 year ago

  Hey good solution.

  Small suggestions for improvement:

  • the min function always uses the smaller value and this gives you a distance when viewing the mobile phone
  • with object-fit you can prevent your images from distorting

  The improved CSS:

  .card-nft{
      width: min(375px, 90dvw);
  }
  
  img{
      object-fit: cover;
  }
  
  
  /* possible solution for the turquoise background: */
  .card-nft-header {
      position: relative;
      transition: .75s all;
  }
  
  .card-nft-header::before {
      width: 100%;
      background: var(--primary-cyan);
      top: 1px;
      height: 100%;
      position: absolute;
      border-radius: 1rem;
      content: "";
      opacity: 0;
  }
  
  .card-nft-header:hover::before {
      opacity: 1;
      transition: .75s all;
  }
  

  Happy Coding 😉

  Marked as helpful

  0

  ---

  

  Marcello3mcweb•170

  @mlaferreiraPosted 12 months ago

  @DigitaleWeltLibrary mutio obrigado meu amigo value mesmo pela dica, não tinha conhecimento desse tecnica, vou aplicar agora mesmo

  0