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

Community feedback

• 

  Lucas 👾•104,160

  @correlucas

  Posted almost 3 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!

  01

  Marked as helpful
• 

  Azeem Saifi•370

  @saifion33

  Posted almost 3 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

  00

  Marked as helpful
• 

  Hyron•5,870

  @hyrongennike

  Posted almost 3 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.

  01

  Marked as helpful