Design comparison
Solution retrospective
Hey Frontend Mentor community!๐
This is my solution to the NFT Preview Card Component challenge
I have just one question:
- How could have I made the nft image hover effect better?
Feedback and advice welcome!
Community feedback
- @correlucasPosted about 2 years ago
๐พHi Dan, congrats on completing this challenge!
Great solution and great start! By what I saw youโre on the right track. Iโve few suggestions to you that you can consider to add to your code:
Your component is perfect, but is not responsive yet, this is due the
fixed width
you've applied to the container.Look both
width
andmax-width
the main difference between these properties is that the first(width) is fixed and the second(max-width) isflexible
, for example, a component withwidth: 320px
will not grow or shrink because the size will be ever the same, but a container withmax-width: 320px
ormin-width: 320px
can grow or contract depending of the property you've set for the container. So if you want a responsive block element, never usewidth
choose ormin-width
ormax-width
.โ๏ธ I hope this helps you and happy coding!
Marked as helpful1 - @hyrongennikePosted about 2 years ago
Hi @igafshell,
Congrats on completing the challenge
No real right way you just have a different solution for the same problem. If you wanted to add a transition you would just need to swap out the
display: none
foropacity: 0
as the display property can't be animated.Below is my solution I used the pseudo elements. my solution
Marked as helpful1@igafshellPosted about 2 years ago@hyrongennike Thanks, now that you mentioned animation, I might actually add one to the image hover effect.
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