NFT Preview Card

What are you most proud of, and what would you do differently next time?

I'm proud of having worked on styling this really fast. I feel more confident with these basic layouts now.

What challenges did you encounter, and how did you overcome them?

I had a hard time with the overlay hover icon effect. I was stumped for a while and researched many different things since I wasn't sure what the problem was straight away. Slowly, I pieced it together and as is often the case, it was simpler than I thought. It was really rewarding to finally figure out.

• I had never made an overlay icon like this before.
• I initially thought I had to import the icon via HTML but I didn't.
• I did a lot of research on stacking context and z-index.
• I learnt about pseudo-elements ::before and ::after.
• I used the `` element for the first time.
• I used the transition property for the first time.
• I caught a small syntax error in a file path that was keeping me stuck for a long time.

What specific areas of your project would you like help with?

Lots of other devs resolved this hover effect in a different way but please give feedback on my method. Specifically in my HTML, the `` element container, and the CSS with hover pseudo-class and pseudo-elements ::before and ::after.