NFT Preview Card Component

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

I'm really proud that I managed to get the image with the eye icon overlay working! It was a bit tricky getting the icon to show up only on hover and positioning it correctly. I also learned how to use position: absolute and position: relative for this, which was something new for me. Getting the overlay to fade in smoothly was a cool feeling too.

If I were to do it again, I would definitely spend more time practicing CSS transitions. I got the hover effect working, but it's not as smooth as I'd like. I'd research different transition properties and timing functions to make the overlay appear more elegantly

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

The biggest challenge I faced was making the image underneath the eye icon and its background overlay still visible. At first, the overlay was completely blocking the image, which wasn't the effect I was going for. I tried a few things, but nothing seemed to work. Then, I watched some YouTube tutorials where people were doing similar hover effects. That's when I realized that I needed to adjust the opacity of the overlay background. By reducing the opacity, I was able to make the overlay semi-transparent, so the image could show through. It was a bit of a "aha!" moment. I'm glad I persevered and found a solution, even though it took a bit of research.

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

While I'm happy with how the hover effect turned out, I did have a bit of trouble getting the border-radius to work correctly on my image. It wasn't applying as I expected, and I'm not entirely sure why. If anyone has any tips or insights on how to make border-radius work consistently with images, especially when they're inside containers with overlays, I'd really appreciate the help. I'd love to understand the underlying reasons and best practices so I don't run into this issue again in the future. Also, if there are any resources you'd recommend for learning more about image styling in CSS, I'd be very grateful.