NFT preview card component (jQuery + Overlay-Icon and Hover Effects)
Design comparison
Solution retrospective
How to use eye icon when using hover mode on css ?
Community feedback
- @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 helpful0@FSwebdeveloperPosted about 2 years agoHi @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 - @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 helpful0 - @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 helpful0@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
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord