Design comparison
Solution retrospective
Hi everyone, I had a hard time figuring out what was the best way to show the background and the view icon at the moment we hover it, I used position relative and absolute, I contained the NFT photo and the other container that has the background separately and then on the background contained I used another container to apply the attribute "position: relative" and then I created other 2 containers in order to allocate the view icon in one layer and the background in another one, I used z-index in order to place the background in 0 and the view icon in 1, it works...
Can you suggest a better way I can do it? Also, I used fixed units in order to use the "position: relative" in the main image container, is there a better way to do it?
Thank you so much if you took the time to read my doubt and even more if you can suggest me something <3
Community feedback
- @denieldenPosted over 2 years ago
Hi Bryan, great work on this challenge! 😉
Here are a few tips for improve your code:
- another way for effect
:hoveris using adivthat appears on hover. I used tailwind but you can still see and understand which css properties I use to do. Look here -> my solution - remove all unnecessary code, the less you write the better as well as being clearer: for example the
divcontainer of avatar image - remove all
marginfrommaintag because with flex they are superfluous - instead of using
pxuse relative units of measurement likerem-> read here
Overall you did well 😁 Hope this help!
Marked as helpful0@BryanCloudDevPosted over 2 years ago@denielden thank you much fr your feedback, I will definitely try to apply the advice you have shared with me, I really appreciate it.
1 - another way for effect
Please log in to post a comment
Log in with GitHub
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