NFT Preview Card Component

Community feedback

• 

  Abdul Khaliq 🚀•72,380

  @0xabdulkhaliq

  Posted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have a suggestion regarding your code that I believe will be of great interest to you.

  ---

  ADDING UP SUBTLE TRANSITION TO IMPROVE UI & UX:

  • Your solution resembles the actual design image from the challenge, this shows how much you've put your efforts to craft your solution to stand out from the rest ones, Congrats for that!

  ---

  • I need to suggest to add a smooth-in-out transition effect during hovering the eye icon.

  ---

  • Here's the example code,

  .header {
    opacity: 0;
    transition: opacity .4s ease-out;
  }
  
  .eye-icon {
    transform: translate3d(-50%, -50%, 0) scale(1.5);
    opacity: 0;
    transition: transform .4s ease-out;
  }
  .img-container:hover .eye-icon {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) scale(1);
  }
  

  • These rules will help you to create a subtle transition effect which will boost your solution's User experience during hover.

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  00

  Marked as helpful
• 

  Bernardo Poggioni•7,030

  @R3ygoski

  Posted over 1 year ago

  Hello Reza, congratulations on the project, it looks almost identical to the proposed design, my sincere congratulations.

  Regarding your question about animations, you can achieve them in a few ways. One option is to add a subtle transition between states using transition. Here's a link about it: W3School - Transition.

  Now, if you want to create a more complex animation, the best option would undoubtedly be @keyframes, as it allows you to create much more intricate animations. Here's a link about it: W3School - Keyframes.

  As for a suggestion about your CSS, I noticed that the card has a bit more spacing on the right. You could try changing its max-width to 332px to make it more symmetrical. But this is just a suggestion.

  Again, congratulations on completing your first project here at FEM. Keep improving, and if you have any questions, please ask below, and I'll try to help as best as I can.

  00

  Marked as helpful