NFT preview card component (jQuery + Overlay-Icon and Hover Effects)

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @FSwebdeveloper, congratulations for your new solution!

  🎯 Your solution its almost done and I’ve some tips to help you to improve it:

  When I did this tutorial I've followed this tutorial to create the structure and setup the hover effect: https://www.w3schools.com/howto/howto_css_image_overlay_icon.asp

  👨‍💻Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/nft-preview-card-vanilla-css-custom-design-and-hover-effects-b8D1k9PDmX

  Use a CSS reset to avoid all the problems you can have with the default CSS setup, removing all margins, making the images easier to work, see the article below where you can copy and paste this css code cheatsheet: https://piccalil.li/blog/a-modern-css-reset/

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  Achinta Haldar•140

  @FSwebdeveloperPosted about 2 years ago

  Hi @correlucas , your solution is more pestigious & customize , and to help me build this project. When I don't know how to use image overlay icon on css, so I have use only jQuery. Thank you for this Feedback, to provide helpful css property w3school link.

  1
• 

  Azeem Saifi•370

  @saifion33Posted about 2 years ago

  Hi Achinta your solution is nice. If you want to improve accessibility

  replace <div class="card"> to <main class="card"> your code </main>

  Happy coding

  Marked as helpful

  0
• 

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  Hi @FSwebdeveloper,

  Nice job on the challenge, just a suggestion if you add min-height: 100vh; to the body and remove the height the card will be in the center of the page.

  Marked as helpful

  0

  ---

  

  Achinta Haldar•140

  @FSwebdeveloperPosted about 2 years ago

  @hyrongennike Nice suggestion man. After few days long I can face this problem and how to fixed this ? Finally You have provide awasome suggestion.

  1