NFT preview card component

Community feedback

• 

  Danilo Blas•6,300

  @Sdann26Posted over 2 years ago

  Hello LazyCoder!

  Personally all your project is well done, I just wanted to mention that always give the images display: block; because not giving them generates an invisible spacing which is what your image has.

  When you do that the overlay will be a little bit blurred so you can change the top to 0.

  .overlay {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    border: none;
    width: 100%;
    height: 275px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    border-radius: 15px;
    transition: 0.4s ease;
    background-color: hsla(178, 100%, 50%, 0.485);
  }
  

  With that it looks like the design without spacing problems.

  By the way remove the errors from the frontend mentor report of your previous QR code challenge so that they come out without any error. Maybe you can correct it because at the end you have done it in this challenge.

  Good Luck :D!

  Marked as helpful

  1

  ---

  

  lazyCoder•50

  @AbbasvoraPosted over 2 years ago

  @Sdann26 Thanks for the feedback😊. I have applied the mentioned changes and will remember them for future projects.

  1