NFT Preview Card Component using Basic CSS

Hello, Frontend Mentor community. This is my solution for the NFT Preview Card Component challenge

This challenge really enhance my HTML and CSS fundamentals. Some struggles I worth mentioning was:

• Creating the main image's hover effect, this is my first time adding hover effect to remove the visibility of and element and vice versa. I used the opacity CSS property to solve it.
• Position an element on top of another element, usually I use the absolute positioning quite easily. But knowing that the element must still be inside the parent element, to solve it I need to add position:relative to the parent element.

Thank you for taking the time to read this, I'm delighted to hear different solutions for this challenge from the community and Always CSS (Code Simply & Swiftly)!