NFT Preview Card

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

I encountered two obstacles during this, one was to align one element to the left, while aligning the other to the right. Luckily some "flex" magic was able to solve this.

Second problem encountered was successfully replicating the hover animation for the image, I believe this second problem thought me valuable knowledge and to use hover selectors more creatively. In the end I used two containers with different z-index values, and the upper layer contained the icon-view image inside of it in HTML, while also containing the background tint as a RGBA color in the stylesheet. This allowed me to change the opacity from 0 to 1 without fully obfuscating the original image, as RGBA allowed me to set the alpha channel to 0.7

• So with this workaround the icon-view's opacity went from 0 -> 1
• The cyan background's opacity went from 0 -> 0.7 and the problem was solved.

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

Definitely with organizing the CSS, during this challenge I had a very messy CSS file, even though the challenge itself was relatively simple.