Design comparison
Solution retrospective
š Hello from the outer space...
This is my solution for: "NFT preview card component".
š§āš Bonus [code]:
I've added a small blur with "css" on hover equilibrium background image. I take the idea form @0xAbdulKhalid
Looks really cool for me! š¤
I'll be happy to hear any feedback and advice! Thank's
š½ See ya! š½
Community feedback
- @0xabdulkhaliqPosted over 1 year ago
Hello there š. Congratulations on successfully completing the challenge! š
- I have other recommendations regarding your code that I believe will be of great interest to you.
CSS šØ:
- The
transition
is not applied perfectly, if you apply a CSStransition
only onhover
, thetransition
will only occur when the userhovers
over the element, but when the user stopshovering
, thetransition
will not be reversed, resulting in an abrupt change. This can be jarring and not desirable from a UX perspective.
- To avoid this issue, you can add the transition rule
transition: .8s ease-out;
for the default state of the element.image__overlay
instead of.image__overlay:hover
. This will ensure that when the user stops hovering, the transition will smoothly revert back to the original state. You can do this by setting the default state transition to the same property values but with a longer duration or a different easing function.
- And, Thank you for giving credits to my idea. Your recognition and support mean a lot to me. It's great to know that my work has been appreciated and valued by someone as respected as you. Your integrity and fairness are truly admirable, and I'm honored to have my idea associated with yours. Your kind words have inspired me to continue sharing my ideas with the world. Thank you again.
.
I hope you find this helpful š Above all, the solution you submitted is great !
Happy coding!
Marked as helpful0@codenaudPosted over 1 year agoHello š
Thank you very much for your recommendation.
You are right, with the transition in
.image__overlay
the effect is much better for the user.I really like the change, thank you š§āš
0
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