Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
Simple project, not a lot to learn here.
What challenges did you encounter, and how did you overcome them?Nothing in particular.
What specific areas of your project would you like help with?How to best use BEM naming convention.
Community feedback
- @0xabdulkhaliqPosted 6 months ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
- I have a suggestion regarding your code that I believe will be of great interest to you.
FIXING INCOMPLETE TRANSITION
- Currently the Hover effect using which has been applied for the card component (
.card
) is not properly applied, It's simply because you've been using it wrongly.
.card:hover { transform: translate(-8px,-8px); transition-duration: .2s; box-shadow: 15px 15px 0 0 var(--clr-black); }
- Due to that whenever the user hovers the component it will smoothly animate but as soon as the user get out of hovering area the component itself will suddenly goes to it's initial state without smoothness as like it's starting state.
- To fix this we need to declare the
transition
property on normal class, i mean the class where we not linked to any pseudostates likehover
,active
etc.
- These are the fixed css rules,
.card { transition: .3s ease; } .card:hover { transform: translate(-8px,-8px); box-shadow: 15px 15px 0 0 var(--clr-black); }
- Now you will get a smooth-in-out transition effect without sudden drop during hover. I updated
transition-duration
totransition
(shortand) property helps us to declare duration and easing at the same time.
- I would recommend you to read this Transitions Reference article by MDN to get an overview with it's usecases.
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful0
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