NFT Card Component

Community feedback

• 

  Mo•840

  @MohamedAridahPosted over 2 years ago

  Hello @britez13, You did a Great job for this challenge. your solution is almost identical to the design, also your HTML structure is very good made.

  For more improvements you can do the following:

  • You can make hover effect of the image more smoother by using transition property.
  • instead using both ::after and ::before pseudo elements you can use one of them as the styles below and everything will work fine:

  .card__figure::after {
          content: url(./images/icon-view.svg);
          position: absolute;
          background-color: var(--cyan-color);
          width: 100%;
          height: 100%;
          opacity: 0;
          top: 0;
          left: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
         border-radius: 1rem;
          overflow: hidden;
          transition: .3s ease;
  	}
  

  .card__figure:hover::after {
          opacity: 1;
  	}
  

  • the active state of the design requires changing the color property of <h1>` and author in the footer elements

  .card__title,
  	card__author-link {
          transition: 0.3s linear; /* don't forget transition */
  	}
  

  .card__title:hover,
  	     card__author-link:hover {
               color: var(--cyan-color);
  	}
  

  • you can see My solution for this challenge it may be useful for you.!

  I hope this wasn't too long for you, hoping also it was useful😍.

  Goodbye and have a nice day.

  Keep coding🚀

  Marked as helpful

  3

  ---

  

  Florencio Britez•170

  @britez13Posted over 2 years ago

  @MohamedAridah Thanks so much for your recommendations. It was really helpful!

  0

  

  Mo•840

  @MohamedAridahPosted over 2 years ago

  @britez13 You are welcome👍🌹. I'm glad this helped you.

  2