NFT preview card with CSS flexbox

Solution retrospective
The difficult part was to add a hover effect to icon-view
Feedback to improve this code is welcome and an easier method to add hover effect with position: absolute;
is welcome
Please log in to post a comment
Log in with GitHubCommunity feedback
- @ahmedafsa
Hello, great work!
Here's my solution to implement the hover effect. I hope it proves helpful 3>
.equilibrium { position: relative; overflow: hidden; border-radius: 16px; } .overlay { background: hsla(178, 100%, 50%, 0.4); position: absolute; top: 0; left: 0; height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; opacity: 0; transition: 0.5s ease; border-radius: 16px; } .overlay:hover { opacity: 1; }
The transparency in the
overlay
div background comes from adjusting the Alpha in the color code to 0.4 (40%), ensuring it doesn't impact the view icon opacity.Marked as helpful - P@danielmrz-dev
Hello @Singraft!
Your project looks great!
That
hover effect
looks pretty good to me. I'd just add acursor: pointer
to it, since the idea is that the image is clickable.Other than that, you did a very good job!
Marked as helpful - @grace-snow
You've missed out all of the essential interactive elements in this. The html is the most important part of this challenge. I recommend you read about planning html on FEDmentor.dev and try to consider other modalities in your work such as keyboard users and screen reader users. Nothing is clickable in this at the moment for anyone. Getting html right is the most important foundational step in any challenge
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