💰 Responsive NFT Card Preview 💰

Solution retrospective
Turned out quite well, so happy happy! 😊
What challenges did you encounter, and how did you overcome them?While adding a hover interaction in the hero image of that neon background color and view icon. I took the help of my custom GPT. ✌🏻
What specific areas of your project would you like help with?Just one very specific part:
In styles.css, there is a particular section of .nft__overlay, along with its hover interaction code.
I would love to hear your thoughts on how that interaction could have been implemented more efficiently. 😃
Please log in to post a comment
Log in with GitHubCommunity feedback
- @imadvv
greeting Shiv,
There are many ways to implement the hover effect. Your implementation works, but from an accessibility standpoint, there are some notes and improvements that can make it better.
Currently, the overlay is a focusable element while the
div
element is not!. "You can make it, of course, but it will require adding some specific data attributes." The more stand-fore way to improve this, is by changing thediv
to either a link (a) or abutton
. This will allow users to interact with the NFT in its active state.For the
nft__overlay
class, you can take advantage of CSS pseudo-classes to implement the view icon, as it is just a decorative icon and does not need to be included in the HTML structure. I made some changes to thenft__overlay
to demonstrate this:html line 25
<!-- <img src="images/icon-view.svg" alt="View icon" class="view-icon"/> -->
css
.nft__overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: hsla(178, 100%, 50%, 0); display: flex; justify-content: center; align-items: center; cursor: pointer; transition: 0.3s ease-in-out; } .nft__overlay::after { content: url(./images/icon-view.svg); opacity: 0; transition: opacity 200ms ease-in-out; } /* Hover Interation */ .nft__overlay:hover, .nft__overlay:focus { background-color: hsla(178, 100%, 50%, 0.5); } .nft__overlay:hover::after, .nft__overlay:focus::after { opacity: 1; }
These changes will make your overlay more accessible and maintain a clean HTML structure.
Hope this give you some hints , Keep up the good work!
Marked as helpful
Join 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