NFT card preview component built with Semantic HTML and Flexbox

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

Creating the image overlay effect was a bit challenging. I did some research on how to create the overlay effect. The solution I implemented was the creation of a parent container for the main image and overlay div elements. The parent container was positioned relatively and the overlay div element was positioned absolutely. I utilised numerous properties such as inset, background-size, background-image, background-position, and background-repeats to get the desired result where the overlay div covered the width and height of the parent container. Additionally, setting the background image to the centre of the overlay and ensuring the image does not repeat.

Overall, I am happy with the outcome of the solution.

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

As always any feedback and criticism is appreciated.